background-attachment: fixed 在移动端失效是浏览器主动禁用策略，ios safari 和 android chrome 84+ 均默认忽略；应改用 position: fixed 全屏背景层或 position: sticky 替代。
background-attachment: fixed 在移动端根本不起作用——不是你写错了，是 iOS Safari 和 Android Chrome（84+）主动禁用它。别花时间调 transform: translateZ(0) 或加 -webkit-background-attachment，这些在当前主流环境下基本无效。
为什么 background-attachment: fixed 在手机上完全失效
这不是 bug，是浏览器的明确策略：为避免滚动卡顿和内存暴涨，iOS Safari 很早就废弃该行为；Android Chrome 84 起默认忽略；微信、QQ、安卓原生 WebView 全部跟随。DevTools 里样式明明“生效”，但背景图照常滚动——这是静默降级，控制台不会报错，也查不到原因。
常见现象包括：
- 页面一滚动，背景图立刻跟着动，或干脆显示为纯色
- 缩放、切 tab、软键盘弹出后，背景短暂偏移或撕裂
- 加了
transform的祖先容器让 fixed 退化为相对该容器固定
用 position: fixed + 独立 <div> 模拟（最稳妥）
<p>核心是把背景图抽离出来，用脱离文档流的层全屏覆盖，并压到内容下方。这个方案在所有主流移动端浏览器中 100% 可控。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>HTML 必须把背景层放在 <code> 最外层，和内容同级：
<div class="bg-fixed"></div>
<main class="content"></main>
CSS 关键项不能漏：
-
position: fixed是基础，top: 0; left: 0; width: 100vw; height: 100vh确保铺满视口 -
z-index: -1是必须的，否则会盖住所有可点击区域 -
pointer-events: none防止遮挡下方交互 - 若
body设了overflow-x: hidden，记得也加到.bg-fixed上，否则横屏时可能溢出
用 position: sticky 替代（轻量但有约束）
当无法插入额外 DOM 节点，或想减少绝对定位干扰时可用，但它对父容器要求更苛刻：
- 背景层必须是
body的直接子元素 - 不能被任何
transform、perspective、filter或will-change包裹，否则sticky失效 - 确保
body和html没有overflow: hidden类样式 - 若页面有吸顶
header，它的z-index默认 > 0，背景层会被盖住——此时不要调低 header 的 z-index，而是给 header 加background: rgba(255,255,255,0.95)让背景“透出”
真正麻烦的不是写对那行 CSS，而是排查哪一层无意中创建了新包含块——有时候删掉一行 transform，背景就突然“钉住”了。移动端固定背景的本质，是放弃对 background-attachment: fixed 的幻想，转而用层级和定位去模拟视觉效果。
