• 技术文章 >web前端 >前端问答

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

    藏色散人藏色散人2021-06-08 11:24:48原创52

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

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

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

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

    9c8afe0fcbbe4ee317893e2b9116065.png

    <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") ——图片路径的位置;

    no-repeat—— 图片不重复;

    center 0px——center是距离页面左边的定位,0px是距离页面上面的定位;

    background-position: center 0——就是图片的定位,同上;

    background-size: cover;——把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中;

    min-height: 100vh;——视窗的高度,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/ window.innerHeight大小。

    推荐学习:《css视频教程

    以上就是css怎么设置图片拉伸不重复的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css表格边框怎么设置 下一篇:css怎么设置tr间距
    第16期线上培训班

    相关文章推荐

    • css如何设置body字体颜色• 你值得了解的一种CSS获取图片主题色的小技巧(分享)• css中如何清除float• css实现三角的原理• css表格边框怎么设置

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网