• 注册
    • 今日签到
    • 连续签到

    暂没有数据

    暂没有数据

    • 总打赏排行
    • 今日收益排行

    暂没有数据

    暂没有数据

    BBS 站务 关注:0 内容:10

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

    请登录之后再进行评论

    登录
  • 帖子间隔 侧栏位置: