background-attachment: fixed 在现代桌面浏览器中虽能工作，但常因祖先元素的 transform/opacity/filter 创建新层叠上下文而退化为 relative 锚定，且 ios safari 等完全不支持，推荐用 position: fixed 独立 div 或伪元素模拟以确保兼容性。
background-attachment: fixed 在现代桌面浏览器中能工作，但实际部署时大概率失效——不是你漏写了 background-size 或 height，而是它被父级的 transform、opacity、filter 静默降级，或在 iOS Safari / 微信 WebView 中根本被忽略。
为什么 background-attachment: fixed 看起来没生效
常见错误现象：样式面板里该属性明明“已激活”，滚动时背景却跟着动，或只在部分设备上错位。根本原因不是写法错，而是渲染上下文变了：
- 任意祖先元素加了
transform: translateZ(0)、opacity: 0.99、filter: blur(1px)，都会创建新层叠上下文，使fixed锚定从视口退化为该容器内部 - 滚动容器不是
body，而是某个div且设了overflow: auto，此时fixed实际锚定在那个 div 的边界框内 - iOS Safari（包括所有 WebKit iOS 浏览器）从不支持该属性，直接当
scroll处理，且不报错、不提示 - Chrome 120+ 对嵌套
fixed背景做了优化，但 Firefox 和 Safari 仍表现不一致，跨浏览器必须实测
用 position: fixed + 独立 div 模拟最稳妥
这是目前兼容性最好、行为最可控的方案，原理是把背景图抽离为脱离文档流的图层，完全绕过 background-attachment 的限制：
- HTML 中，
<div class="bg-fixed"></div>必须是的直接子元素，和<main></main>同级 - CSS 关键项不能省：
position: fixed、top: 0、left: 0、width: 100vw、height: 100vh、z-index: -1、pointer-events: none -
z-index: -1是必须的，否则会遮挡所有点击区域；部分旧安卓浏览器对负 z-index 渲染异常，可改用z-index: 0+ 给内容层加z-index: 1 - 若页面有横向滚动（如宽表格），
fixed背景会随 viewport 固定，横滑时可能露出空白，需同步加overflow-x: hidden到.bg-fixed
伪元素 ::before 实现更轻量但需注意层级
适合无法修改 HTML 结构、或想减少 DOM 节点的场景，但要求父容器严格满足定位条件：
- 目标容器（如
.hero）必须设position: relative，否则::before的position: fixed会脱离预期参考系 -
::before要写全：content: ""、position: fixed、top: 0、left: 0、width: 100%、height: 100%、background-image、z-index: -1 - 父容器不能有
transform、filter、isolation: isolate等隐式创建层叠上下文的声明 - 如果
.hero不在视口顶部（比如前面有导航栏），top: 0会导致背景偏移，此时应改用position: absolute并手动计算top值
移动端必须放弃 fixed，别调试直接换方案
iOS Safari 早废弃、Android Chrome 84+ 默认禁用、微信/QQ/安卓 WebView 全部跟随——这不是 bug，是浏览器主动策略，为避免滚动卡顿和内存暴涨而静默降级。加 -webkit-background-attachment: fixed 或 transform: translateZ(0) 基本无效，还可能引入新层叠上下文让问题更难排查。
真正难的不是选哪个 CSS 属性，而是判断当前结构里哪一层悄悄加了 will-change、哪段 JS 动态注入了 opacity、或者用户正用 Safari 横屏浏览导致 vh 值突变——这些细节不会报错，但会让固定背景突然“失重”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
