background-attachment: fixed 在移动端被浏览器主动禁用，因属高开销渲染行为；可靠替代方案是用 + position: fixed + object-fit: cover 实现全屏固定背景。
background-attachment: fixed 在桌面端基本可用，但在 iOS Safari 和多数安卓 WebView 中根本不会生效——这不是你漏写了 background-size: cover，而是浏览器主动禁用了该特性。
为什么 background-attachment: fixed 在手机上不工作
移动端浏览器（包括 iOS 17+ Safari、Chrome for Android）普遍将 background-attachment: fixed 视为高开销渲染行为，直接降级为 scroll。实际表现可能是：背景图随页面一起滚动、突然卡顿、甚至触发白屏闪退。这不是 CSS 写错了，是渲染引擎策略性放弃支持。
- 桌面 Chrome/Firefox/Edge 启用硬件加速时可稳定运行，但 Safari 桌面版仍可能“跳帧”
-
body或html上直接设 fixed 背景，在某些安卓 WebView 中会完全失效 - 即使加了
height: 100vh，iOS Safari 的vh值会随地址栏收放动态变化，导致背景缩放抖动
真正能跑通的替代方案：用 ![]()
+ position: fixed
把背景图当独立图层钉在视口里，绕过 CSS 背景机制的兼容性黑洞。这是目前最可靠、性能可控的全屏固定背景实现方式。
- 给
<img>设position: fixed; top: 0; left: 0; width: 100%; height: 100%; - 必须加
object-fit: cover;和object-position: center;，否则拉伸变形 - 设
z-index: -1;确保它在内容下方；再加pointer-events: none;避免遮挡点击 - 内容容器（如
<main></main>）需设position: relative;，否则文字可能被图层裁剪
如果坚持用 background-attachment: fixed，这些细节不能漏
仅限桌面端交付或内部管理后台等可控环境。必须同步满足以下条件，否则效果不可见或错位：
-
background-image必须存在，且路径正确（检查 Network 面板是否 404） - 父容器（通常是
body）要设margin: 0;和height: 100vh;，不能依赖height: 100% - 必须配
background-size: cover;和background-position: center center;，否则 fixed 后图像可能只显示一角 - 避免在
body上同时设overflow-x: hidden或overscroll-behavior，可能干扰 fixed 行为
最常被忽略的一点：fixed 背景的“固定”是相对于视口，不是相对于屏幕物理位置。当用户缩放页面（Ctrl + / Cmd +），或在 Safari 中地址栏收起时，100vh 动态变化会导致背景图重绘偏移——这个抖动无法靠 CSS 修复，只能换 <img> 方案规避。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
