让网页背景图片 固定,不随缩小放大而变化

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wstpa/article/details/48395117

最近在百度首页,缩小放大时,发现背景图片一直保持不变,只是内容在变化,看看了源码,才知道怎么回事。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {margin: 0;padding: 0}
    #main {position:absolute;left:0;top:0;width: 100%;height: 100%;background: url(a.jpg) center 0 no-repeat; background-size: cover;background-attachment: fixed;}
    #main div {width: 1200px;height: 150px; background: red;margin: 10px auto}
    </style>
</head>
<body>
    <div id="main">
        <div>1111111111111111111</div>
    </div>
</body>
</html>

注意:
1,采用绝对定位
2,background-size: cover

展开阅读全文

没有更多推荐了,返回首页