background-attachment: fixed 在移动端失效是因 ios safari 和安卓 webview 为性能主动禁用该属性，静默降级为 scroll；推荐用 position: fixed + 独立 div 模拟，需确保其为 body 直接子元素并设 z-index: -1、pointer-events: none 等关键样式。
background-attachment: fixed 在移动端根本不起作用——这不是你代码写错了，是 iOS Safari 和绝大多数安卓 WebView（包括 Chrome 84+、微信、QQ）主动禁用该属性，且不报错、不警告，纯静默降级为 scroll。
为什么 background-attachment: fixed 在手机上完全失效
浏览器这么做是出于性能硬约束：每次滚动都要重绘整个视口背景图，移动端 GPU 和内存吃不消，直接跳过渲染逻辑。常见现象包括：
-
DevTools里样式明明显示background-attachment: fixed，但背景图照常滚动 - 桌面 Chrome 看着正常，一上真机就“动起来”
- 在
body或html上设置，iOS Safari 直接忽略；安卓 WebView 则可能触发卡顿甚至白屏
用 position: fixed + 独立 div 模拟固定背景（最稳妥）
这是目前跨端兼容性最高、实测最稳定的方案，核心是把背景图从 CSS 属性里“摘出来”，放到一个脱离文档流的独立层中。
- HTML 中必须将
<div class="bg-fixed"></div>作为的**直接子元素**，不能嵌套在<main></main>、<section></section>或任何 wrapper 里 - CSS 必须包含：
position: fixed、top: 0、left: 0、width: 100vw、height: 100vh、z-index: -1、pointer-events: none -
z-index: -1是硬性要求，否则会遮挡所有可点击区域；若body设了overflow-x: hidden，记得同步加到.bg-fixed上 - 背景图建议用
background-image+background-size: cover+background-position: center，避免拉伸变形
position: sticky 方案的适用边界
它不是 background-attachment: fixed 的平替，而是一种受限的“伪固定”，只在极少数结构下能跑通。
- 仅当背景容器是
body的直接子元素，且父级**没有**transform、filter、perspective、will-change等创建层叠上下文的属性时才可能生效 - 必须显式设
height: 100vh，否则sticky无法锚定；iOS 15+ 支持稍好，但安卓 WebView 仍极不稳定 - 滚动时背景“跳一下”或“卡半截”，大概率是父容器高度计算异常，或触发了隐式层叠上下文
- 别指望靠
z-index把 sticky 背景压到内容下方——更稳妥的是让内容容器自带半透明背景或镂空设计
图片与性能相关的隐形坑
即使布局写对了，大图、高分辨率或不当缩放也会让固定背景卡顿、错位甚至闪屏。
- 避免使用超宽图（如
3840×1080），它在竖屏手机上会疯狂裁剪顶部和底部 - 移动端必须加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则vh单位会失真 - iOS Safari 对
background-size: cover+background-position: center在 fixed 模式下的插值有微小误差，可尝试加backface-visibility: hidden强制稳定合成 - 如果容器有
border-radius或overflow: hidden，背景图可能被意外裁切，建议改用clip-path
真正容易被忽略的点是：哪怕你用了 position: fixed 方案，如果页面存在多个 transform 元素（比如轮播图、动画卡片），它们可能无意中创建了新的层叠上下文，导致背景层被错误地限制在某个局部区域里——调试时得逐个关掉 transform 看是否恢复，而不是只盯着背景本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
