码迷,mamicode.com
首页 > Web开发 > 详细

CSS实现图片自适应背景大小

时间:2019-06-11 00:56:04      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:osi   浏览器   --   body   url   背景图   需求   pre   enter   

<body>
<div>
    <!--背景图片-->
    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
    <!--其他代码 ... -->
</div>
</body>

以上是需求代码

以下是实现css样式代码

#web_bg{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

通过以上操作,我们可以实现将一张图片作为网页背景,且不会因为浏览器的尺寸导致留白和重复

CSS实现图片自适应背景大小

标签:osi   浏览器   --   body   url   背景图   需求   pre   enter   

原文地址:https://www.cnblogs.com/dongxixi/p/11001225.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!