background-attachment: fixed 在现代浏览器中常被静默降级为 scroll，主因是触发层叠上下文（如 transform、filter）或未置于根滚动容器；可靠方案是仅在 body 上使用并禁用干扰样式，或多层视差改用 translatez 或 js 动态控制。
background-attachment: fixed 能做出基础视差效果，但现代浏览器（尤其是 Chrome v99+ 和所有主流 Safari）默认不执行它——不是你代码写错了，而是它被静默降级为 scroll 了。
为什么 background-attachment: fixed 在多数页面里“没反应”
根本原因不是 CSS 写得不对，而是浏览器主动拦截了该行为：只要背景容器触发了新的层叠上下文（transform、filter、opacity、will-change 等），或者没落在根滚动容器上，fixed 就会被忽略。
- Chrome v99+ 要求必须设在
body或html上才可能生效；子容器哪怕样式全对，大概率白写 - Safari 几乎全版本默认禁用
fixed背景，连body上都不保证工作 - 父元素写了
transform: translateZ(0)或filter: blur(1px)→ 直接失效，且控制台不报错 -
background-attachment只对设置了background-image的元素起效，纯色或渐变背景也适用，但必须显式声明
能真正跑起来的最小可行写法
绕过兼容性陷阱的最简路径，是放弃“多层视差”，只做单层固定背景，并严格约束容器层级和样式组合。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 把背景直接加在
body上，且确保body { height: 100vh; margin: 0; overflow-x: hidden; } - 必须配套这四句，缺一不可：
background-size: cover、background-position: center、background-repeat: no-repeat、background-attachment: fixed - 禁止在
body或其任意父级（html）上使用transform、filter、opacity 、<code>will-change - 移动端要加降级：
@supports not (background-attachment: fixed) { ... }里换回scroll+background-size: 100% auto防拉伸
想做多层视差？别硬刚 fixed，换方案
真需要前景/中景/背景不同速滚动，background-attachment: fixed 已不适合——它只支持“固定 or 滚动”，没有中间速度。强行套多个 fixed 层只会全部卡死在视口，失去纵深感。
- 用
transform: translateZ()+perspective是目前最可控的替代：给不同容器设不同translateZ值，再配合scale()补偿缩放，滚动时自然产生速度差 - JavaScript 方案更灵活：监听
scroll事件，用requestAnimationFrame动态改各层background-position的 y 值，按比例偏移 - 如果只是要“看起来有视差”，用
background-attachment: local配合可滚动容器（如overflow: auto的.section），反而比fixed更稳定
最常被忽略的一点：视差不是靠“写对一个属性”实现的，而是靠“避开所有会让浏览器关掉它的条件”。fixed 在今天是个边缘特性，不是默认可用功能——先验证是否真被支持，再决定要不要投入时间调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
