CSS 如何实现视差滚动效果？

Question

CSS 如何实现视差滚动效果？

仓乃文 · Accepted Answer

视差滚动通过 background-attachment: fixed 让背景图固定不动，前景内容正常滚动，产生层次感和深度效果。

```css
.parallax-section {
  background-image: url(bg.jpg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 500px;
}
```

多层视差（CSS 3D 方案）：
```css
.parallax-container {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax-layer-back {
  transform: translateZ(-1px) scale(2);
}

.parallax-layer-base {
  transform: translateZ(0);
}

.parallax-layer-front {
  transform: translateZ(0.5px) scale(0.5);
}
```

补充说明：
- background-attachment: fixed 在 iOS Safari 上有兼容问题，可用 position: fixed 伪元素替代
- perspective + translateZ 方案性能更好，支持多层视差
- translateZ 负值让元素远离观察者，滚动更慢
- scale 补偿 translateZ 造成的尺寸变化：scale = 1 + translateZ * -1 / perspective