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

最新推荐文章于 2024-05-15 09:36:56 发布

weixin_30897233

最新推荐文章于 2024-05-15 09:36:56 发布

阅读量1.6k

点赞数 1

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/dongxixi/p/11001225.html

版权

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

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

转载于:https://www.cnblogs.com/dongxixi/p/11001225.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30897233

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端CSS实现图片自适应背景大小

<body><div>  <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div> </div></body>以上是...
复制链接

扫一扫