当前位置：首页 > article >正文

CSS 实现视差滚动：详解 background-attachment 与 transform:translate3D 及应用

article 2025/3/11 3:31:07

视差滚动效果（Parallax Scrolling）是一种网页设计效果，通常用于创建背景与前景元素之间的滚动速度差异，营造出深度感和动态的视觉效果。这种效果常用于增强用户的互动体验，广泛应用于长页面、单页网站、以及多层次的内容展示中。

1. 视差滚动是什么？

视差滚动是一种在页面滚动时，背景图像和前景内容的滚动速度不同的效果。背景图像通常滚动速度较慢，而前景内容则滚动速度较快。通过这种差异，页面能够呈现一种立体感或深度感，给用户带来更富有动感的视觉体验。

2. 实现方式：背景固定（background-attachment）

一种常见的视差效果实现方式是利用 CSS 的 background-attachment: fixed 属性，保持背景在页面滚动时的固定位置，而前景内容根据页面滚动正常滚动。

代码示例：背景固定方式实现视差效果

<div class="parallax">
  <div class="content">
    <h1>欢迎来到视差滚动页面</h1>
    <p>滚动页面查看效果。</p>
  </div>
</div>

<style>
  body, html {
     
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
  .parallax {
     
    position: relative;
    background-image: url('https://example.com/background.jpg');
    background-attachment: fixed; /* 固定背景 */
    background-position: center;
    background-size: cover;
    height: 100vh; /* 视差区域的高度 */
  }
  
  .content {
     
    position: absolute;
    top