• 注册
  • 【快速解决肌肤问题】 补水保湿、控油祛痘、美白祛斑、敏感修复、祛皱、抗衰老!!!
  • 查看作者
    • DIV CSS实现网页背景图片自适应全屏

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

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

      以下是用CSS实现的方法:

      HTML:

      <!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:

      #web_bg{  position:fixed;  top: 0;  left: 0;  width:100%;  height:100%;  min-width: 1200px;  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;
      }

    • 0
    • 0
    • 0
    • 6.2k
    • 请登录之后再进行评论

      登录
      • 总打赏排行
      • 今日收益排行
    • 珑轲
      珑轲
      关注影视娱乐,分享星生活! QQ108002626
    • 烟雨缥缈
      烟雨缥缈
      他太懒了,什么都没有写
    • 混邪
      混邪
      他太懒了,什么都没有写
    • 梦华
      梦华
      他太懒了,什么都没有写
    • 已重置-1907
      已重置-1907
      他太懒了,什么都没有写
    • 搜星美妆
      搜星美妆
      专注美容护肤
    • 四季如歌
      四季如歌
      他太懒了,什么都没有写
    • 。。。
      。。。
      有人要和我玩游戏嘛,我躺,你秀!
    • 搜星游戏
      搜星游戏
      他太懒了,什么都没有写
    • zhrlq
      zhrlq
      他太懒了,什么都没有写
    • 71a5ae82d952633
      71a5ae82d952633
      他太懒了,什么都没有写
    • 前沿观注
      前沿观注
      他太懒了,什么都没有写
    • 珑轲
      珑轲
      关注影视娱乐,分享星生活! QQ108002626
    • 发布
    • 任务
    • 实时动态
    • 单栏布局 侧栏位置: