pc页面滚动的时候，背景图不动只是页面滚动

CSS背景图固定滚动效果

最新推荐文章于 2024-02-23 11:17:34 发布

weixin_30701575

最新推荐文章于 2024-02-23 11:17:34 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/haonanZhang/p/6678842.html

代码如下，直接拷贝出去就能看效果；

用到的方法

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .container{
                width: 100%; height: 100%;
                position: relative;
                z-index: 1;
            }
            .bd_index{
                 position: relative;
                z-index: 1;
                width: 100%; height: 600px;
                background: url(lib/banner.jpg) no-repeat center center;        
                background-size: cover;    
                background-attachment: fixed;    
            }
            .neirong{
                width: 1200px; height: 600px;
                margin: 0 auto;
                font-size: 22px;
                color: #fff;
                box-sizing: border-box;
                padding: 100px 0;
                text-align: center;
            }
            .index_two{
                width: 100%; min-height: 400px;
                background: url(lib/bg_01.jpg) no-repeat center center;
                /*  背景图高度1200px 比较高的背景图才行 */
                position: relative;
                background-size: cover;
                z-index: 1;
                background-attachment: fixed;
            }
            .wenzi{
                height: 600px;
                width: 100%;
                background: #FFF;
                position: relative;
                z-index: 2;
                font-size: 22px;
                color: #333;
                box-sizing: border-box;
                padding: 100px 0;
                text-align: center;
            }
        </style>
    </head>
    <body>
        
        <div class="container">
            <!-- 效果一 -->
            <div class="bd_index one">
                <div class="neirong">都是发了好感动卤肉饭光华路；<br>是淡饭黄齑</div>
            </div>
            <!-- 效果二 -->
            <div class="wenzi">
                都是发了好感动卤肉饭光华路；<br>是淡饭黄齑
            </div>
            <div class="index_two">
                
            </div>
            <div class="wenzi">
                都是发了好感动卤肉饭光华路；<br>是淡饭黄齑
            </div>
        </div>
        
    </body>
</html>