css怎么设置图片拉伸不重复-木庄网络博客

2022-04-05 12:42:44 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者藏色散人，侵删。

css设置图片拉伸不重复的方法：首先通过“background: url("../../../static/imagic/sy.jpg")”设置图片路径；然后通过“no-repeat”属性设置图片不重复即可。

本文操作环境：windows7系统、HTML5&&CSS3版，DELL G3电脑

css设置背景图片拉伸全屏不重复

话不多说直接上图我们只给了宽和高100%就会出现这种状况

<template>
  <div class="hello"></div>
</template>
  
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  }
};
</script>

<style scoped>
.hello {
  background: url("../../../static/imagic/sy.jpg") no-repeat;
  height: 100%;
  width: 100%;
  background-size: cover;//全屏展示
}
</style>

background: url("../../../static/imagic/sy.jpg") ――图片路径的位置；

相关阅读 >>

css border-top-color属性怎么用

css怎么设置居中

css中如何让文字大小改变

更多相关阅读请进入《css》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css怎么设置图片拉伸不重复

css怎么设置图片拉伸不重复

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论