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

前言

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

一、视差滚动是什么

视差滚动（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