background-attachment: fixed 仅在容器非绝对/固定定位、无transform等层叠上下文属性、有明确高度、未启用will-change且非iOS Safari时生效；移动端需用transform模拟或JS实现。
background-attachment: fixed 是实现纯 CSS 视差滚动最直接、最轻量的方式，但它不是“加了就生效”的魔法属性——很多页面加了没反应，根本原因是它对容器结构和渲染上下文有明确要求。
为什么 background-attachment: fixed 有时完全不生效
这个属性只在满足以下全部条件时才真正起作用：
• 容器不能是 position: absolute 或 position: fixed（会脱离文档流，失去视口锚定基础）
• 容器不能被设置了 transform、perspective、filter 等会创建新层叠上下文（containing block）的属性
• 容器必须有明确高度（height 或 min-height），不能靠内容撑开又无最小限制
• 页面不能启用了 will-change: transform 全局 hack（某些 Chrome 版本下会禁用 fixed 背景）
• 移动端 Safari 默认禁用该行为（需额外处理，见下文）
移动端 Safari 中 background-attachment: fixed 失效怎么办
iOS Safari 从很早版本起就无视 background-attachment: fixed，这是出于性能和手势滚动一致性的主动限制，无法通过 CSS 绕过。
可行的务实方案只有两个：
• 改用 transform: translateZ(0) + will-change: transform 模拟（效果接近但非真视差，且可能触发重绘）
• 退回到「伪视差」：给背景层设 background-attachment: scroll，再配合 @keyframes + scroll-timeline 驱动位移（需现代浏览器支持）
• 不做妥协？那就必须用 JavaScript 监听 scroll 或 scrollend 事件手动计算偏移 —— 但这就脱离了“纯 CSS”前提
background-attachment: local 和 scroll 的实际差异在哪
三者行为边界常被混淆：
• scroll（默认）：背景随元素**框体**滚动，即元素在视口中移动时，背景跟着动；但如果元素内部有滚动条（如 overflow: auto），背景**不随内容滚动**
• local：背景随元素**内部内容**滚动 —— 必须搭配可滚动容器（overflow: auto/scroll）才看得出区别，适合长图文卡片内的局部视差感
• fixed：背景锚定在**视口左上角**，无论容器在哪、是否滚动、是否嵌套，它都纹丝不动 —— 正是这个“绝对固定”制造了相对运动的视差错觉
使用 background-attachment: fixed 时最容易被忽略的兼容点
真正上线前必须检查：
• 在 macOS Safari 和 iOS Safari 上，即使写了 fixed，背景也会表现为 scroll 行为（无报错、无提示）
• 如果父容器设置了 backface-visibility: hidden，部分旧版 Android WebView 会强制降级为 scroll
• background-size: cover + fixed 在高 DPR 屏幕上可能因缩放计算偏差导致边缘轻微撕裂，建议补一句 background-origin: border-box
• 不要试图在 body 或 html 标签上直接设 fixed 背景 —— 浏览器对其支持极不稳定，应始终作用于独立块级容器（如 .parallax-section）
立即学习“前端免费学习笔记（深入）”；
