【CSS】面试官问我视差滚动怎么实现？我懵了...
视差滚动通常是指在页面滚动时，元素与背景之间产生的视觉效果，使得滚动看起来更加吸引人。以下是一个简单的视差滚动实现示例：
HTML:
<div class="parallax">
<div class="content">
<!-- 内容在这里 -->
</div>
</div>CSS:
.parallax {
height: 400px;
background-image: url('background.jpg'); /* 设置背景图片 */
background-attachment: fixed; /* 关键点：背景固定，内容滚动 */
background-size: cover;
overflow: hidden;
}
.content {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}在这个例子中，.parallax 类的元素拥有一个固定的背景图片，通过 background-attachment: fixed 实现视差效果。.content 类的元素是滚动内容。这样，当页面向下滚动时，.parallax 元素的背景图像将保持固定，而 .content 内的内容会向上滚动，从而形成视差效果。
评论已关闭