纯CSS跨端稳定视差必须用transform: translateZ()+perspective+preserve-3d构建3D空间，因iOS Safari禁用background-attachment: fixed；DOM顺序、z-index须与Z坐标一致，否则远层盖近层；scroll-timeline无法实现连续位移视差。
纯 CSS 实现真正有景深层次感的视差滚动，background-attachment: fixed 是最简单可用的起点，但它在 iOS Safari 上基本失效；想跨端稳定，必须用 transform: translateZ() + perspective + transform-style: preserve-3d 构建 3D 空间，且 DOM 层级顺序和 z-index 必须与 Z 坐标逻辑一致——否则远处的山会盖住近处的树。
background-attachment: fixed 能不能直接用？
能，但只适合桌面 Chrome/Edge 和部分安卓浏览器。它让背景图相对于视口固定，内容滚动时背景“不动”，形成速度差。问题在于：
- iOS Safari（15.4+）主动禁用
background-attachment: fixed，回退为scroll，视差完全消失 - 即使开启
will-change: transform或transform: translateZ(0)，也无法唤醒 Safari 的 fixed 行为 - 多层 fixed 背景在 Firefox 中可能触发重绘抖动，尤其配合
background-size: cover时
实操建议：仅用于内部演示或明确不支持 iOS 的场景；上线前务必在真机 Safari 上测试 fixed 是否生效（滚动时背景是否静止）。
用 translateZ() 搭配 perspective 实现真 3D 视差
这是目前唯一能在 iOS Safari、Chrome、Edge 全平台稳定工作的纯 CSS 方案，核心不是“动背景”，而是让不同层在 3D 空间中处于不同深度，浏览器自动按 Z 值缩放和偏移。
- 父容器必须设
perspective: 1px（值越小，视差越强；但0.1px可能让元素缩到看不见） - 滚动容器（如
.parallax-wrapper）加transform-style: preserve-3d - 各层用负
translateZ值区分远近：transform: translateZ(-1px) translateY(0)（远）、translateZ(-0.3px)（近） - 每层必须脱离文档流：
position: absolute+top: 0; width: 100%; height: 100%，否则滚动时会“拖拽” - 务必加
will-change: transform到每一层，否则 Safari 渲染帧率骤降
注意：translateZ(-2px) 并不等于“两倍远”，实际位移是非线性的，需靠真机反复调参。
DOM 顺序和 z-index 冲突会导致穿帮
视差层的视觉前后关系，由两个维度共同决定：3D 空间中的 Z 坐标（决定移动速度），和渲染层叠上下文中的 z-index（决定谁盖住谁）。二者不一致就穿帮。
- 典型错误：把
translateZ(-4px)的远山层写在 HTML 里比translateZ(-0.5px)的前景树更靠后，又没设足够高的z-index - 正确做法：HTML 中从远到近写（最远层最先出现），再给每层设匹配的
z-index（如远山z-index: 1，中景z-index: 2，前景z-index: 3） -
transform-style: preserve-3d会创建新的层叠上下文，导致父容器的z-index失效，所以必须在各子层上单独设
穿帮现象往往只在滚动到某一段才出现，容易被忽略——建议录屏慢速滚动，逐帧检查图层遮挡关系。
scroll-timeline 能否替代 JS 实现视差？
不能。CSS scroll-timeline 目前（2026年11月）仅支持绑定动画进度（如淡入、缩放），不支持动态计算并驱动 transform: translateY() 或 translateZ() 的连续位移。你写不出 animation: parallax linear; animation-timeline: scroll(root block) 这样的视差动画，因为 @keyframes 里无法引用滚动位置变量。
-
scroll-timeline适用于入场动画、进度条、分段高亮等离散状态变化 - 真正的视差需要实时映射：滚动 100px → 背景位移 30px → 中景位移 60px → 前景位移 90px，这只能靠 JS 或原生
background-attachment模拟 - 若强行用
scroll-timeline+@keyframes做视差，只能切几帧（如 0%→33%→66%→100%），效果生硬，无纵深感
真正跨端稳定的方案仍是：iOS 用 translateZ + absolute 分层，桌面用 background-attachment: fixed 回退，两者共存时用 @supports 隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
