background-attachment: fixed 背景失效是因父容器触发层叠上下文或合成层，导致背景被限制在局部渲染；推荐用伪元素模拟 fixed 效果，或设于 body 上。
当使用 background-attachment: fixed 设置固定背景时，如果父容器设置了 overflow: hidden、transform、will-change 或 filter 等属性，会导致该背景被裁剪或“失效”，表现为滚动内容遮盖背景——这不是 bug，而是浏览器的层叠（stacking）和合成（compositing）行为所致。
原因：fixed 背景依赖根视口定位
background-attachment: fixed 的本质是让背景图像相对于**视口（viewport）固定**，而非元素自身。但一旦元素触发了新的层叠上下文（stacking context）或独立的合成层（如 transform 不为 none），其 fixed 背景就会被限制在该层内渲染，失去“穿透到视口”的能力，从而被子内容遮挡。
方案一：避免触发意外的层叠上下文
检查并移除不必要的样式，尤其注意以下常见“罪魁祸首”：
- transform: translateZ(0) / translate3d(0,0,0) —— 强制硬件加速，但会创建新层叠上下文
- overflow: hidden（尤其在 fixed 背景的直接父元素上）
- filter: blur() / opacity
- will-change: transform（未必要时慎用）
- contain: layout paint（可能截断 fixed 行为）
方案二：用伪元素模拟 fixed 背景（推荐）
脱离元素自身的渲染上下文限制，把背景“提”到顶层：
立即学习“前端免费学习笔记（深入）”；
.hero {
position: relative;
height: 100vh;
}
.hero::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(./bg.jpg);
background-size: cover;
background-position: center;
z-index: -1;
}
/* 可选：防止伪元素干扰点击 */
.hero::before {
pointer-events: none;
}✅ 优势：完全绕过 background-attachment 的限制；兼容性好；可自由控制层级（z-index）和尺寸；支持 backdrop-filter 等高级效果。
方案三：用 body 作为 fixed 背景容器（适合全页场景）
若背景用于整个页面，直接设在 body 或 html 上最稳妥：
body {
margin: 0;
background: url(./bg.jpg) center/cover fixed;
height: 100vh;
overflow-y: scroll;
}⚠️ 注意：确保没有其他样式（如 wrapper div 的 overflow:hidden）覆盖 body 的渲染区域。
基本上就这些。优先用伪元素法，稳定可控；排查样式时重点盯 transform 和 overflow；fixed 背景不是万能的，它对渲染环境很敏感。
