background-attachment: fixed 在现代浏览器中常被降级为 scroll，主因是层叠上下文触发或移动端限制；需满足 height: 100vh、无 transform/filter/opacity
直接用 background-attachment: fixed 在现代浏览器里大概率不生效——不是你漏写了 background-image，而是浏览器主动把它降级成了 scroll。
为什么 background-attachment: fixed 在 DevTools 里显示为 scroll
Chrome v99+ 和所有主流 Safari 版本默认禁用该行为，只要背景容器触发了层叠上下文（比如父元素有 transform、filter、opacity: 0.99 或 will-change），它就会静默 fallback。你在 CSS 里写了 fixed，Computed 面板却显示 scroll，这就是典型信号。
- 它只对设置了
background-image的元素起作用；纯色或渐变背景也得显式声明该属性才可能参与计算 - 必须设在根滚动容器上：只有
body或全屏级<section></section>才有机会生效，嵌套在.wrapper > .hero里的写法基本白搭 - 移动端（尤其是 iOS Safari）几乎完全忽略它，连
body上都不保证工作
能跑起来的最小可行写法（仅限桌面端）
想让它在 Chrome / Firefox 桌面版勉强可用，必须同时满足这四点，缺一不可：
-
body或独立区块（如.parallax-section）设height: 100vh（不是min-height） - 配套写全：
background-size: cover、background-position: center、background-repeat: no-repeat - 确保该元素及其所有祖先节点没用
transform、filter、opacity 、<code>will-change - 禁用
overflow: hidden或position: sticky等会截断滚动参照系的样式
示例：
立即学习“前端免费学习笔记（深入）”；
body {
height: 100vh;
margin: 0;
background-image: url('bg.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}移动端和新版浏览器的可靠替代方案
别硬刚 fixed，改用更可控的路径：
- 用
window.scrollY+background-position动态偏移：监听滚动，节流后更新element.style.backgroundPosition = 'center ' + (window.scrollY * 0.4) + 'px'，背景图尺寸至少是容器宽高的 2 倍 - 用 CSS
@scroll-timeline+animation-timeline: scroll(root)（Chrome 115+ / Safari 17.4+）：原生线性映射，无需 JS，但需加contain: layout style paint到滚动容器 - 用
transform: translateY()驱动图层：比top或margin-top性能高一个量级，且可精确控制速度系数（如0.3、0.7）
关键细节：所有参与视差的元素必须加 position: relative 或 position: absolute，否则 transform 可能不生效；requestAnimationFrame 是节流底线，不是可选项。
最容易被忽略的兼容性陷阱
很多人以为加个 -webkit-background-attachment: fixed 就能救 iOS，其实无效——Safari 不是“不支持”，是主动关掉了这个特性。真正要兜底，得靠媒体查询或特性检测：
- 用
@supports not (background-attachment: fixed)写降级样式 - 用
CSS.supports('animation-timeline', 'scroll()')判断是否支持 scroll-driven animations - 真机测试比 DevTools 模拟器重要得多，特别是 iOS 上的
overflow: auto容器内滚动
