background-attachment: fixed；页面滚动得到不同的背景图（好看）

创建滚动固定背景图片的HTML/CSS技巧

原创已于 2023-12-12 19:07:50 修改 · 326 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2023-03-09 11:39:58 首次发布

HTML + CSS + CSS3（页面布局）专栏收录该内容

23 篇文章

订阅专栏

这段代码演示了如何使用CSS实现背景图片在页面滚动时产生固定(parallax)效果。通过设置`background-attachment:fixed`和`background-size:cover`，当背景图片大于元素高度时，可以创建出在页面滚动时元素背景图动态变化的视觉效果。

多说无意，上代码：

/* 写HTML ，当背景图片大于元素高度时，设置background-attachment:fixed; 当页面滚动，当前元素就可以得到不一样的背景图，很好看。 */

<style>
    body{
        height: 1500px;
    }
    .title {
        background: white;
        padding: 60px;
        margin: 0 auto;
        text-align: center;
    }

    .title h1 {
        font-size: 35px;
        letter-spacing: 8px;
    }

    .parallax-one {
        padding-top: 100px;
        padding-bottom: 100px;
        overflow: hidden;
        position: relative;
        width: 100%;
        background-image: url(https://b.zol-img.com.cn/desk/bizhi/image/10/960x600/1598319721647.jpg);
        
        /* 写HTML ，当背景图片大于元素高度时，设置background-attachment:fixed; 当页面滚动，当前元素就可以得到不一样的背景图，很好看。 */
        background-attachment: fixed;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        background-repeat: no-repeat;
        background-position: top center;
    }
</style>

<body>
    <div>
        <!-- 第一个section姑且算作内容区域，其实第二个也可以作为内容区域的，看个人需求 -->
        <section>
            <div class="title">
                <h3>Let's do some</h3>
                <h1>PARALLAX</h1>
            </div>
        </section>
    
        <section>
            <div class="parallax-one">
                <h2>SOUTHERN CALIFORNIA</h2>
            </div>
        </section>
    </div>
  
    <div>
        <section>
            <div class="title">
                <h3>Let's do some</h3>
                <h1>PARALLAX</h1>
            </div>
        </section>
    
        <section>
            <div class="parallax-one">
                <h2>SOUTHERN CALIFORNIA</h2>
            </div>
        </section>
    </div>
</body>