background-attachment: fixed 失效是因 transform、filter 等触发新层叠上下文，导致降级为 scroll；移动端 safari 默认禁用，chrome v99+ 要求背景设在根容器；替代方案为 js 监听 scroll + raf 或 scroll-driven animations。
background-attachment: fixed 在现代浏览器中为什么失效了
因为 transform、perspective、will-change 或 filter 等属性会触发新的层叠上下文（stacking context），导致 background-attachment: fixed 在子元素中被强制降级为 scroll。这不是 bug，是规范行为。
- 常见触发场景：父容器用了
transform: translateZ(0)做硬件加速，或filter: blur(1px) - 移动端 Safari 几乎默认禁用 fixed 背景，即使没加 transform，也常因 viewport 缩放或 overflow 处理而失效
- Chrome 从 v99 开始对
fixed背景加了更严格的合成条件，比如要求背景图必须在根滚动容器（body或html）上才可靠
不用 background-attachment: fixed 怎么实现视差效果
靠 JavaScript 监听 scroll 事件 + requestAnimationFrame 动态更新背景位移，或用 CSS scroll-driven animations（新标准，兼容性有限）。
- 最稳妥的 JS 方案：监听
window.scrollY，用element.style.backgroundPositionY = scrollY * 0.5 + 'px'控制移动速度 - 避免直接在
scroll事件里改样式，务必节流并用requestAnimationFrame批量更新 - 如果只支持 Chrome/Firefox 115+，可用
@keyframes+animation-timeline: scroll()，但 Safari 完全不支持，生产环境慎用 - 别用
position: sticky模拟——它无法控制背景图偏移量，只能固定元素位置
background-attachment: fixed 的最小可行 HTML 结构
只有当背景图设置在 body 或 html 上，且页面没有强制创建新层叠上下文时，它才可能正常工作。
- 必须确保
body高度撑满视口：body { height: 100vh; margin: 0; } - 背景图要设在
body，而不是某个.section内部容器上 - 禁用所有可能触发层叠上下文的 CSS：检查是否有
transform、opacity 、<code>will-change等写在body或其父级上 - 示例有效写法：
body { background-image: url(bg.jpg); background-attachment: fixed; background-size: cover; }
视差滚动性能关键点
真正卡顿的从来不是背景图本身，而是频繁重排/重绘或主线程阻塞。
立即学习“前端免费学习笔记（深入）”；
- 用
background-position动画时，优先用will-change: background-position提前提示合成器（但别滥用，会吃内存） - 避免在视差元素上同时设置
box-shadow或border-radius—— 这些会让 GPU 合成变慢 - 图片尺寸尽量压缩，大图（>2MB）在滚动中解码会明显掉帧
- 移动端建议关闭视差：
@media (prefers-reduced-motion: reduce) { .parallax { background-attachment: scroll; } }
视差效果看着简单，但跨设备一致性差、性能敏感、调试时很难一眼看出是哪层 CSS 干扰了 background-attachment，真要上线，得逐个关掉 transform/filter/opacity 测试。
