background-attachment: fixed 在桌面端常因父级 transform/opacity/filter/will-change 创建新层叠上下文而失效，锚定退化为容器内；移动端（尤其iOS Safari）已彻底禁用，需用 position: fixed 的独立 DOM 元素模拟。
background-attachment: fixed 为什么在桌面端也经常失效
它不是“写不对”，而是被祖先元素静默覆盖了。只要任意父级加了 transform、opacity、filter 或 will-change，就会创建新层叠上下文，导致 background-attachment: fixed 实际锚定退化为该容器内部，而不是视口。
常见现象：DevTools 里属性明明是绿色激活状态，滚动时背景却跟着动；或者只在某一段区域“固定”，超出后就偏移。
- 用 Chrome 的 “Layers” 面板检查目标元素是否被强制合成为独立图层——若出现“Scrolling Layer”或“Isolated Group”，基本就是它被截断了
- 把背景声明上移到
body或html，绕过中间容器干扰（但注意：iOS Safari 仍不认） - 避免在
body上同时设overflow-x: hidden和background-attachment: fixed，前者会抑制后者在部分安卓 WebView 中的行为
移动端根本不用指望 background-attachment: fixed
iOS Safari 从 iOS 13 起已彻底禁用该属性，Android Chrome 和微信 WebView 多数版本也默认忽略——不是 bug，是浏览器主动降级，且不报错、不警告。
你写的 background-attachment: fixed 在手机上实际等效于 scroll，连 -webkit-background-attachment: fixed 在 iOS 15+ 也无效。
立即学习“前端免费学习笔记（深入）”；
- 别用
@supports (background-attachment: fixed)做判断依据，它在 Safari 里返回true，但行为仍是scroll - 媒体查询中加
@media (hover: none) and (pointer: coarse)可识别触摸设备，但不能解决失效问题，只能用来降级样式 - 如果必须支持移动端固定背景，唯一可靠路径是脱离 CSS 背景机制，用 DOM 层模拟
用 position: fixed + 独立 div 模拟最稳
这不是“曲线救国”，而是目前兼容性、可控性和调试体验最好的方案。核心是把背景图抽成一个脱离文档流的图层，完全绕过 background-attachment 的限制逻辑。
-
<div class="bg-fixed"></div>必须是的直接子元素，和主内容同级，不能嵌套在<main></main>或<section></section>里 - CSS 必须写全：
position: fixed、top: 0、left: 0、width: 100vw、height: 100vh、z-index: -1、pointer-events: none - 若页面有横向滚动（比如宽表格），需同步给
.bg-fixed加overflow-x: hidden，否则横滑时露出右侧空白 - 图片用
background-size: 100% 100%比cover更稳——避免滚动时重采样卡顿，尤其低端安卓机
伪元素 ::before 方案的隐藏条件
适合无法改 HTML 的场景，但比独立 div 更娇气，稍不注意就错位。
关键约束：目标容器（如 .hero）必须设 position: relative，否则 ::before 的 position: fixed 会以视口为参考，但视觉上可能和容器脱节。
-
::before必须包含content: ""，否则不渲染 - 高度不能靠
height: 100%继承——要写死height: 100vh或用 JS 动态设，因为父容器若没显式高度，100%是无效的 - 若容器本身有
transform或filter，::before的fixed会再次被截断，表现和原生background-attachment: fixed一样不可靠 - 无障碍方面：这个伪元素不会被屏幕阅读器感知，若背景图含关键信息（如品牌标语图），得额外加
aria-hidden="true"或用真实<img alt="如何设置CSS背景图不随内容滚动_使用background-attachment-fixed" >替代
background-attachment: fixed，而是得实时判断当前 DOM 结构、祖先样式、目标设备的渲染策略是否允许它生效。很多时候，换一层 DOM 或一个定位方式，比反复调试 CSS 属性更省时间。 
