【前端知识之CSS】CSS视差滚动

饭啊饭°

已于 2022-07-18 09:35:01 修改

阅读量1.2k

点赞数 2

分类专栏：前端知识之html+CSS 文章标签：前端 css css3

于 2022-05-17 20:17:12 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/124828397

版权

前端知识之html+CSS 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍如何用CSS完成视差滚动的效果。

文章目录

前言
一、视差滚动是什么
二、background-attachment

一、视差滚动是什么

视差滚动（Parallax Scrolling）就是多层背景以不同速度移动，形成立体的运动效果。
网页解析成：背景层、内容层、悬浮层
在这里插入图片描述

二、background-attachment

background-attachment的作用是设置背景图像是否固定或者随着页面的其余部分滚动；
（1）scroll：默认值，随着滚动；
（2）fixed：当页面的其余部分滚动时，背景图像不会移动；
（3）inherit：继承父元素background-attachment属性的值。

例子：

<style>
    div {
        height: 100vh;
        background: rgba(0, 0, 0, .7);
        color: #fff;
        line-height: 100vh;
        text-align: center;
        font-size: 20vh;
    }

    .a-img1 {
        background-image: url('img1.jpg');
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
    }

    .a-img2 {
        background-image: url('img2.jpg');
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
    }

    .a-img3 {
        background-image: url('img3.jpg');
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
    }
</style>

<body>
    <div class="a-text">1</div>
    <div class="a-img1">2</div>
    <div class="a-text">3</div>
    <div class="a-img2">4</div>
    <div class="a-text">5</div>
    <div class="a-img3">6</div>
    <div class="a-text">7</div>
</body>