background-attachment: fixed 在滚动时失效，主因是父容器触发层叠上下文（如 transform、opacity、filter 等），使其锚定从视口退化为该容器；iOS Safari 完全不支持，需用 position: fixed 伪元素或 JS 模拟替代。
background-attachment: fixed 在滚动时失效？检查父容器是否触发了层叠上下文
很多情况下 background-attachment: fixed 看起来“没起作用”，图片随页面一起滚动，根本原因常是父元素存在 transform、opacity、will-change、filter 或 overflow: hidden 等属性，意外创建了新的层叠上下文（stacking context）或格式化上下文（BFC），导致 fixed 背景被限制在该容器内而非视口。
实操建议：
- 用浏览器开发者工具检查目标元素及其所有祖先，逐个禁用
transform和opacity，看 fixed 是否恢复 - 若必须保留
transform: translateZ(0)等硬件加速写法，可尝试改用transform: translate3d(0, 0, 0)并搭配backface-visibility: hidden，部分场景下更兼容 - 移动端 Safari 对
fixed背景支持极差，iOS 15+ 才开始有限支持，且仍要求元素不能是position: fixed的子元素
移动端 Safari 中 background-attachment: fixed 完全不生效怎么办
iOS Safari（尤其 iOS 14 及更早）会直接忽略 background-attachment: fixed，这是已知限制，不是代码写错。它把 fixed 背景降级为 scroll 处理。
替代方案只有 JavaScript 模拟：
- 监听
scroll事件，动态计算并设置background-position，使背景位移与滚动反向抵消 - 用
getBoundingClientRect()+window.scrollY获取当前视口偏移，避免因scrollTop不准确导致抖动 - 务必加
passive: true防止滚动卡顿：window.addEventListener('scroll', handler, { passive: true }) - 注意节流——不用
throttle，而用requestAnimationFrame驱动更新，更平滑
background-attachment: fixed 导致渲染性能下降？别让大图直接贴 body
fixed 背景在滚动时需持续重绘，尤其当背景图尺寸大（如 4K）、格式为 PNG（无压缩）或使用 background-size: cover 时，GPU 压力明显上升，低端 Android 设备易掉帧。
优化方向：
- 优先用 WebP 替代 PNG/JPG，同画质下体积小 30%–50%，解码更快
- 将背景图尺寸控制在 1920×1080 以内，超出部分由
cover拉伸补足，而非加载超大原图 - 避免在
或上设 fixed 背景，改用一个position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1的伪背景层，更可控 - 对非首屏区域，用 IntersectionObserver 懒加载 fixed 背景，减少初始渲染负担
background-attachment: local 是什么？和 fixed、scroll 有什么区别
local 是最易被忽略但其实很实用的取值：背景图随元素内容滚动而滚动（比如容器内有溢出文字并设置了 overflow: auto），而不是随容器本身或整个视口滚动。
典型使用场景：
- 长文本容器带渐变背景，希望背景始终“贴着文字”滚动，而非固定在容器顶部
- 代码块预览区，背景是行号竖线，需随代码滚动对齐
-
local要求元素必须有可滚动内容（overflow不为visible），否则行为退化为scroll - 注意兼容性：IE 完全不支持
local，Edge 16+、Chrome 50+、Firefox 25+ 支持良好
CSS 的 background-attachment 行为高度依赖渲染上下文和平台实现，fixed 在桌面端看似简单，一到真机就暴露兼容细节；local 虽冷门，但在内容滚动类组件里往往比 JS 模拟更轻量。别只盯着属性值，多看 devtools 的 Layers 面板和 Rendering 标签页。
