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

Posted dongxixi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;

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

以上是关于CSS实现图片自适应背景大小的主要内容,如果未能解决你的问题,请参考以下文章

css文件 如何使背景图片大小适应div的大小

css文件 如何使背景图片大小适应div的大小

CSS背景图片自适应屏幕大小

CSS设置背景图宽度100%,高度自适应

dreamweaver 背景图片怎么自适应浏览器大小

div+css怎么让图片自适应大小时,又不超过它本身最大的时候!