background-attachment: fixed 在移动端失效是浏览器主动禁用，因导致卡顿和内存问题；iOS Safari 早已废弃，安卓 WebView 多数跟随；可用 position: sticky 模拟或 requestAnimationFrame 节流的 JS 方案替代。
background-attachment: fixed 为什么在移动端失效
它在 iOS Safari 和大部分安卓 WebView 里压根不工作，不是你写错了，是浏览器故意禁用的。iOS 从很早开始就废弃了对 background-attachment: fixed 的支持，因为会导致滚动卡顿和内存问题。
常见错误现象：background-attachment: fixed 在桌面 Chrome 正常，一到手机上背景图就跟着滚——这不是 bug，是标准行为。
- 安卓原生浏览器、微信内置浏览器、QQ 浏览器基本都跟随 iOS 策略，忽略该声明
- 即使加了
-webkit-background-attachment: fixed也没用 - 某些 Android Chrome 版本会部分支持，但触发条件苛刻（比如必须开启硬件加速 + 父容器有 transform）
替代方案：用 position: sticky 模拟固定背景
核心思路是把背景图“提出来”，用一个独立的 <div> 层叠在内容下方，并让它随视口固定定位。<p>使用场景：全屏轮播头图、视差滚动首屏、品牌展示页顶部大图。</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>给背景容器设 <code>position: sticky + top: 0，再配合 z-index: -1 压到内容下层
overflow: hidden，否则 sticky 会被截断background-size: cover + background-position: center 防止拉伸错位 <div class="bg-fixed"></div>
<div class="content">正文</div>
<p>.bg-fixed {
position: sticky;
top: 0;
height: 100vh;
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
z-index: -1;
}
.content { position: relative; }兼容性更强的 JS 方案：监听 scroll 手动更新 background-position
当需要精确控制或做视差效果时，CSS 已经不够用了，得靠 JS 动态算偏移量。
容易踩的坑：scroll 事件高频触发导致卡顿，尤其在低端机上。
- 务必用
requestAnimationFrame节流，别直接绑addEventListener('scroll', ...) - 读取
window.scrollY后，计算出反向偏移值，赋给background-position-y - 注意 Safari 对
background-position的 CSS 变量支持较晚，建议用element.style.backgroundPosition
示例关键逻辑：
let ticking = false;
function updateBg() {
const y = window.scrollY * 0.5; // 视差系数
document.body.style.backgroundPosition = `center ${y}px`;
ticking = false;
}
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(updateBg);
ticking = true;
}
});background-attachment: local 是什么，能用吗
background-attachment: local 的作用是让背景图随元素内容滚动，而不是随容器滚动——但它和“固定背景”完全相反，别被名字误导。
使用场景极少：只适用于内部有大量可滚动内容（如 textarea 或带 overflow: auto 的 div），且你希望背景图贴着文字一起动。
- 它不会让背景图停在视口里，反而更“粘”内容，和需求背道而驰
- IE 完全不支持，Firefox 支持但行为不一致，Chrome 表现最稳定
- 和
fixed混用会以最后一个有效值为准，local不会帮你修复移动端失效问题
真正跨端可靠的固定背景，从来不是靠一个 CSS 声明搞定的；要么用 sticky 层叠结构兜底，要么用节流后的 scroll 计算。最麻烦的地方在于：你得同时照顾 Safari 的限制、安卓 WebView 的策略、以及用户手指滑动时的帧率表现——这些细节不显眼，但一漏就整个首屏失焦。
