background-attachment: fixed 在移动端基本无效，是 iOS Safari 和多数安卓 WebView 主动静默降级为 scroll；唯一跨端稳定方案是用 position: fixed 模拟，且必须满足三个硬性条件：元素为 body 直接子元素、使用 100dvh（或 fallback）、z-index: -1。
background-attachment: fixed 在移动端基本无效，这不是你写错了，是 iOS Safari 和多数安卓 WebView 主动禁用它——静默降级为 scroll，DevTools 里样式还在，但背景照常滚动。真正“优雅”的实现，必须绕过这个限制，用 position: fixed 模拟，且细节决定成败。
为什么 background-attachment: fixed 在移动端失效
它不是 bug，而是浏览器的主动取舍：每次滚动都要重绘整个视口背景，高分辨率图+软键盘弹出时极易卡顿或错位。iOS Safari 从早期就忽略该值；安卓 WebView 渲染行为不一，有的偏移、有的裁切。更隐蔽的是，只要祖先元素有 transform、filter 或 will-change，fixed 就自动退化——连控制台 warning 都没有。
常见现象包括：
-
@supports (background-attachment: fixed)返回true，但实际不生效 - 桌面正常，手机一打开就滚动
- 页面加了
transform: translateZ(0)做硬件加速后，背景突然“活”了
用 position: fixed 模拟固定背景的硬性要求
这是目前唯一跨端稳定、行为可预测的方案。关键不在“怎么写”，而在“写在哪”和“怎么压底”：
立即学习“前端免费学习笔记（深入）”；
-
<div class="bg-fixed"></div>必须是的**直接子元素**，不能嵌套在<main></main>、<section></section>或任何带transform的容器里 - CSS 必须显式声明：
position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;—— 不能用100%，否则依赖父级高度，而body高度不可靠 -
z-index: -1是强制项，漏掉会导致整个页面无法点击、选中文本；若需兼容老安卓，可用z-index: 0; pointer-events: none; - 若
body有overflow-x: hidden，必须同步加到.bg-fixed上，否则横滑时右侧露白
用 100dvh 替代 100vh 防止地址栏跳动
移动端地址栏显示/隐藏会动态改变视口高度，100vh 只取初始值，导致背景图底部被裁或留白。用 dvh 单位能实时响应：
-
height: 100dvh是现代标准（Chrome 104+、Safari 16.4+、Firefox 110+） - 不支持
dvh的旧环境，fallback 方案是：min-height: 100vh; height: 100vh;+ JS 监听resize动态设style.height = window.innerHeight + 'px' - 别用
object-fit: cover在<img alt="如何在CSS中优雅实现全屏背景图固定不随页面滚动" >上替代——position: fixed的<img alt="如何在CSS中优雅实现全屏背景图固定不随页面滚动" >在高 DPR 屏幕易模糊，且无法响应视口缩放
伪元素方案的适用边界与陷阱
用 ::before 模拟比新建 div 看似简洁，但限制极多：
- 仅当目标容器是
body直接子元素、且无transform/filter干扰时才可能生效 -
.hero::before { position: fixed; }实际是相对于视口固定，但如果.hero不在顶部（比如有 sticky header），背景就会错位 - iOS 15+ 对
position: sticky支持改善，但安卓 WebView 仍不稳定；sticky更难调试——滚动时背景“跳一下”或“卡半截”，大概率是父容器触发了层叠上下文 - 屏幕阅读器默认忽略纯装饰性伪元素，若背景含品牌文案等关键信息，必须补
aria-hidden="true"或改用语义化结构
最易被忽略的点：不是“怎么让背景不动”，而是“怎么让它不动的同时不破坏交互、不牺牲可访问性、不卡在旧设备上”。z-index: -1、100dvh、body 直接子元素这三者缺一不可，少一个，上线后就可能收用户截图说“背景在动”。
