纯 css grid 无法实现视差滚动，必须结合 perspective + transform-style: preserve-3d；grid 仅负责静态布局，不参与滚动偏移计算，z-index 不影响滚动速度；正确方案是 grid 作容器，各图层用绝对定位+translatez+scale补偿，并注意移动端兼容性与性能优化。
纯 CSS Grid 本身不提供视差滚动能力，它不能直接控制滚动时各层的位移速度差异。要实现“Grid 中的背景分层视差”，必须把 Grid 当作布局容器，再叠加其他 CSS 视差技术——最可行的是 perspective + transform-style: preserve-3d 方案。
为什么不能只靠 grid-template-areas 或 grid-row 实现视差？
CSS Grid 是静态布局系统，grid-area、grid-row 等属性定义的是元素在文档流中的位置和尺寸，不参与滚动偏移计算。即使你用 Grid 把背景层、中景层、内容层排成一列，它们仍会以相同速度滚动，没有速度差就没有视差。
常见误解是以为给不同 grid-row 设置不同 z-index 就能产生滚动速度差——但 z-index 只影响堆叠顺序，不影响滚动行为。
正确做法：Grid 做容器，perspective 做视差引擎
将 Grid 作为滚动容器（overflow-y: auto），内部用多个绝对定位的 div 作为图层，并启用 3D 变换上下文：
-
grid-container必须设height（如100vh）且overflow-y: auto，否则无法触发滚动 - 每个图层需设
position: absolute，并统一父容器为relative - 父容器加
perspective: 1000px和transform-style: preserve-3d - 背景层用
transform: translateZ(-200px)，中景层用translateZ(-100px)，前景层用translateZ(0) - 必须配合
scale()补偿透视缩放：例如transform: translateZ(-200px) scale(1.2)（公式为scale(1 + 200 / 1000)） - 内容层（文字/按钮）要加
z-index: 10和pointer-events: auto，否则会被底层遮挡
移动端兼容性陷阱：fixed 背景在 iOS 上失效
很多人想走捷径，用 background-attachment: fixed 配合 Grid 区域——这在 Safari（尤其是 iOS）上大概率不生效，因为 WebKit 会忽略该属性以节省内存和功耗。
替代方案只有两个：
- 改用
transform: translateY()+ JS 监听scroll，但要加{ passive: true }防卡顿 - 坚持纯 CSS 方案时，必须用
perspective+translateZ，它在 iOS Safari 15.4+ 中稳定支持 - 切勿对图层设
background-attachment: fixed，它和transform共存时行为不可控
性能关键点：合成器线程 vs 主线程
视差效果卡顿，90% 出在错误触发重排（reflow）。以下写法会掉帧：
- 用
top、margin-top动画图层位置 → 强制重排 - 图层没设
will-change: transform或backface-visibility: hidden→ 浏览器不敢交由合成器处理 - 背景图未压缩或尺寸过大（如 4000×2000 JPG）→ 解码阻塞渲染
正确做法是：所有位移只走 transform: translateZ()，图层加 backface-visibility: hidden，图片用 webp 格式并限制宽度 ≤ 1920px。
真正难的不是写出多层结构，而是让每一层的 translateZ 值、perspective 值、scale 补偿值三者匹配——差一点，就会出现图层错位、缩放失真或滚动撕裂。调试时建议先固定 perspective: 1000px，再按比例调整 translateZ，最后用 DevTools 的 3D 视图面板验证空间关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
