前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍如何用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</