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

本文转载自查看原文 2019-06-10 23:57 2741 前端之CSS

<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;
}

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 背景图片自适应大小(css3) 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）前端：如何让background背景图片进行CSS自适应背景图片自适应大小（平铺） CSS实现网页背景图片自适应全屏 css 如何让大小不同的图片表现一致，同时自适应呢？ css3图片大小自适应的方法(不采取拉伸) CSS——background-size实现图片自适应手机背景图片自适应浏览器屏幕大小，完全填满 WEB网页如何让背景图片跟随可视窗口自适应大小