background-attachment: fixed 在移动端完全不可用，桌面端需同时满足 margin: 0、min-height: 100vh、background-size: cover、background-position: center center、background-repeat: no-repeat 才可能生效；替代方案是用 body::before 伪元素模拟固定背景。
background-attachment: fixed 在移动端基本不可用，桌面端也需满足多个硬性条件才可能稳定生效；盲目使用只会导致背景随滚动、错位、闪动甚至白屏——这不是你写错了，是浏览器主动限制。
为什么 background-attachment: fixed 在 iOS Safari 和安卓 WebView 中完全不生效
iOS Safari（所有版本）彻底忽略该声明，无论写在 body 还是任意元素上；安卓 Chrome 自 v56 起默认禁用，WebView 更是直接降级为 scroll 行为。这不是渲染 bug，而是浏览器为保滚动性能做的策略性屏蔽——固定背景会强制全视口重绘，对内存和 GPU 压力极大。
常见现象包括：
- DevTools 里
background-attachment显示为fixed，但视觉上背景图完全跟着页面滚动 - 页面一滚动，背景瞬间“跳”回顶部或偏移一角
- 配合
transform或will-change后，Chrome 静默失效且不报错
在桌面端让 background-attachment: fixed 真正起作用的 5 个必要条件
仅写 background-attachment: fixed 不够，缺一不可：
-
margin: 0—— 清除body默认外边距，否则背景图横向/纵向错位 -
min-height: 100vh—— 不能用height: 100%，父容器高度未定义时背景只覆盖可视区一半 -
background-size: cover—— 否则小图拉伸变形，大图只显示局部 -
background-position: center center—— 居中是视觉稳定的底线，尤其搭配cover时 -
background-repeat: no-repeat—— 防止平铺干扰“固定”感知
完整最小可用示例：
body {
margin: 0;
min-height: 100vh;
background-image: url('bg.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
替代方案：用 body::before 伪元素模拟 fixed 效果
当兼容性是硬需求（比如生产环境必须支持 iOS），必须放弃 background-attachment: fixed，改用伪元素层：
- 给
body::before设position: fixed+top: 0+left: 0+width: 100%+height: 100% - 加
z-index: -1确保内容在它上方 - 必须加
pointer-events: none，否则伪元素会拦截所有点击事件 - 背景图通过
background-image设置，同样要配background-size: cover和background-position: center
这个方案绕过了 CSS 背景机制的浏览器限制，iOS Safari、安卓 WebView、旧版 Chrome 全部可用。
容易被忽略的关键细节：fixed 是相对于视口，不是屏幕物理位置
用户缩放页面（Ctrl + / Cmd +）、Safari 地址栏收放、甚至切换标签页，都会触发 100vh 动态变化，导致背景图重绘抖动——这个抖动无法靠 CSS 修复。更隐蔽的问题是：background-attachment: fixed 的“固定”锚点是当前包含块，一旦祖先元素有 transform、opacity、filter 或 overflow: hidden，它就会退化为相对于该容器固定，而非视口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
