background-attachment: fixed 在移动端（尤其 ios safari）失效是因系统主动限制，需加 -webkit 前缀、确保容器有固定高度、避免触发新层叠上下文，并用 requestanimationframe + transform 降级实现视差。
直接用 background-attachment: fixed 就能实现最简背景图视差滚动，但只在桌面端稳定；移动端（尤其是 iOS Safari）会失效或退化为普通滚动，必须加兼容处理才能上线。
为什么 background-attachment: fixed 在手机上不生效
这不是 bug，是 Safari 主动限制：iOS 15 及更早版本默认禁用该属性，防止页面卡顿和内存泄漏。即使写了 background-attachment: fixed，真机上实际表现等同于 scroll。
- 必须显式添加
-webkit-background-attachment: fixed，仅靠标准写法不够 - 若父容器有
transform、filter或will-change，会触发新层叠上下文，导致 fixed 失效——得检查 DOM 结构，不能只看目标元素样式 - 部分安卓 WebView（如旧版 UC）也不支持，需 JS 降级兜底
纯 CSS 实现的硬性前提条件
没设高度？没设尺寸？那 background-attachment 就是摆设。它只对有明确渲染尺寸的块级元素起作用，height: auto 或依赖内容撑开的容器必然失败。
- 容器必须有固定高度，推荐用
height: 100vh（不是min-height） -
background-size: cover和background-position: center要配齐，否则图会拉伸或偏移 - 避免在该容器内使用
overflow: hidden，否则边缘可能被意外裁切 - 图片分辨率建议 ≥ 1920×1080px，缩放时才不易糊
移动端 fallback 到 JS 方案的关键写法
当 background-attachment: fixed 不可用时，用 transform: translateY() 模拟是唯一可靠路径。但别直接在 scroll 事件里改样式——会掉帧、粘滞、iOS 上尤其明显。
- 监听
scroll时只缓存window.scrollY，用requestAnimationFrame统一更新位移 - 背景层偏移量 =
-scrollY * 0.3，系数越小“越远”，别用整数（如 1）否则失去视差感 - 必须给元素加
will-change: transform（仅对该元素），否则 Chrome 会降级到 CPU 渲染 - 移动端要额外监听
touchmove并调用event.preventDefault()，否则 iOS Safari 不更新scrollY
真正容易被忽略的是：视差效果是否在首屏加载完成前就已就绪。如果背景图还没加载完，background-attachment: fixed 会先显示空白或错位，JS 方案也得等 img.onload 或 IntersectionObserver 触发后才启动计算——这点在慢网环境下特别致命。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
