• 注册
  • 站务管理 站务管理 关注:2 内容:18

    DIV CSS实现网页背景图片自适应全屏

  • 查看作者
  • 打赏作者
    • 站务管理
    • DIV CSS实现网页背景图片自适应全屏

      一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动。

      以下是用CSS实现的方法:

      HTML:

      1
      2
      3
      4
      5
      6
      7
      <!DOCTYPE html><html><head>
          <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
          <title>title</title></head><body><div class="wrapper">
          <!--背景图片-->
          <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
          <!--其他代码 ... --></div></body></html>

      CSS:

      1
      2
      #web_bg{  position:fixed;  top0;  left0;  width:100%;  height:100%;  min-width1200px;  z-index:-10;  zoom: 1;  background-color#fff;  background-repeatno-repeat;  background-size: cover;  -webkit-background-size: cover;  -o-background-size: cover;  background-positioncenter 0;
      }

      请登录之后再进行评论

      登录
      • 总打赏排行
      • 今日收益排行
    • 珑轲
      珑轲
      有人的地方就有江湖
    • 烟雨缥缈
      烟雨缥缈
      他太懒了,什么都没有写
    • 梦华
      梦华
      他太懒了,什么都没有写
    • 已重置-1907
      已重置-1907
      他太懒了,什么都没有写
    • 搜星网
      搜星网
      他太懒了,什么都没有写
    • 。。。
      。。。
      有人要和我玩游戏嘛,我躺,你秀!
    • @明路
      @明路
      他太懒了,什么都没有写
    • 云清风
      云清风
      他太懒了,什么都没有写
    • 琴声悠扬
      琴声悠扬
      热爱舞蹈,画画,体育
    • kk
      kk
      他太懒了,什么都没有写
    • 暂没有数据

    • 发表内容
    • 实时动态
    • 做任务