background-attachment: fixed 在移动端普遍无效，是浏览器为性能主动降级；替代方案是用 position: sticky 模拟，或降级为 scroll 并配合 background-size 和 transform 优化。
background-attachment: fixed 在移动端根本不起作用
绝大多数 iOS 和 Android 浏览器（包括 Safari、Chrome for iOS、Firefox for Android）会忽略 background-attachment: fixed，尤其当元素有 overflow: scroll 或处于 position: fixed/absolute 容器中时。这不是 bug，是浏览器为性能和手势滚动一致性做的主动降级——固定背景需要持续合成层更新，移动端 GPU 资源紧张，直接禁用。
替代方案：用 position: sticky 模拟视差滚动效果
真正能跨平台生效的“伪固定”做法，是把背景图作为独立元素，用 position: sticky 锁定在视口，再通过父容器的 overflow-y: scroll 触发滚动层级关系。关键点：
-
sticky元素必须有明确的top值（如top: 0），且其父容器需有高度限制或overflow属性 - 背景图元素需设
z-index低于内容层，避免遮挡文字或按钮 - 图片要用
object-fit: cover+width: 100vw; height: 100vh填满视口，而非background-image
示例结构：
<div class="scroll-container"> @@##@@ <div class="content">...</div> </div>
CSS：
.scroll-container {
overflow-y: scroll;
height: 100vh;
}
.sticky-bg {
position: sticky;
top: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
z-index: -1;
}
如果坚持用 background-image，只能降级为 background-attachment: scroll
这是最稳妥的兜底方案。虽然失去视差感，但能保证图片随内容自然滚动，不撕裂、不白屏。注意三点：
- 务必设置
background-size: cover或contain，否则小图在大屏上重复拉伸失真 - 用
background-position: center center防止图片偏移裁剪 - 若需“局部固定感”，可对容器加
transform: translateZ(0)强制硬件加速，部分安卓 Chrome 会轻微改善渲染流畅度（但不恢复 fixed 行为）
检测是否支持 background-attachment: fixed 的脚本写法
不能依赖 CSS.supports('background-attachment', 'fixed')，因为该 API 返回 true，但实际渲染无效。可靠方式是 DOM 检测：
function supportsFixedBackground() {
const el = document.createElement('div');
el.style.cssText = 'background-attachment: fixed; height: 1px;';
document.body.appendChild(el);
const isFixed = el.scrollHeight === 1;
document.body.removeChild(el);
return isFixed;
}
返回 false 时，应立即切换到 sticky 或 scroll 方案。这个判断必须在页面初始化时执行，不能等到滚动事件里才做——否则用户已看到错位了。
真正麻烦的是混合场景：比如一个页面里部分区域要视差、部分要固定、还有视频叠加。这时候得按区块单独检测 + 单独实现，没有全局开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
