移动端 background-attachment: fixed 基本无效且易致卡顿或白屏，推荐用 position: fixed 的 替代，需设 object-fit: cover、z-index: -1、pointer-events: none 并配合相对定位内容容器。
background-attachment: fixed 在移动端根本不管用
绝大多数移动端浏览器（包括 iOS Safari 和 Android Chrome）对 background-attachment: fixed 的支持是残缺的——它要么被忽略，要么触发严重渲染卡顿甚至白屏。这不是你代码写错了，是浏览器主动降级了。
真正起作用的场景只在桌面端 Chrome/Firefox/Edge（且需开启硬件加速），而 Safari 桌面版也常因滚动优化策略导致背景“跳帧”。
实操建议：
- 永远先加
background-size: cover和background-position: center center，否则fixed效果不可见 - 给父容器设
height: 100vh，但注意vh在 iOS Safari 中会随地址栏收放动态变化，导致背景突然缩放 - 避免在
body或html上直接设fixed背景——某些安卓 WebView 会直接失效
替代方案：用 ![]()
position: fixed 模拟
这是目前最稳定、兼容性最好的全屏固定背景实现方式，原理是把图片作为独立图层钉在视口里，不依赖 CSS 背景属性。
关键点：
- 图片
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; - 给它加
z-index: -1，确保在内容下方；同时给内容容器设position: relative防止 z-index 失效 - 务必加
pointer-events: none到图片上，否则会拦截所有点击事件 - 如果页面有横向滚动，
width: 100vw可能导致右侧留白，此时改用min-width: 100vw更稳妥
示例结构：
@@##@@ <main style="position: relative;">...内容</main>
为什么不用 position: sticky 替代
position: sticky 是基于容器滚动的粘性定位，和视口固定完全不是一回事。它无法实现“背景不动、内容从上面滚过”的效果，只会在元素到达容器边界时停住，本质仍是文档流内定位。
常见误用现象：
- 把
sticky加在背景容器上，结果一滚动就消失——因为它的“粘性”依赖父容器高度，而全屏背景通常没有明确父容器约束 - 和
background-attachment: fixed混用，反而引发层叠冲突或重绘异常 - 在 flex/grid 容器中使用时，某些旧版 Safari 会完全忽略
sticky行为
性能陷阱：大图 + fixed = 滚动掉帧
哪怕在桌面端，一张 3MB 的 WebP 全屏背景配上 background-attachment: fixed，也会让滚动帧率跌破 30fps——因为每次滚动都要重新合成整个背景层。
必须做的优化：
- 图片尺寸严格控制在
1920×1080以内，用srcset响应式提供 2x/1x 版本 - 禁用
background-repeat，重复平铺在fixed模式下极易产生渲染撕裂 - 避免在
:hover或动画中动态切换background-attachment，触发强制重排 - 如需淡入效果，用
opacity动画而非transform，后者在 fixed 背景上可能失真
实际项目里，最常被忽略的是 iOS Safari 对 vh 单位的动态修正机制——地址栏收起时 100vh 突然变大，导致背景图拉伸变形。这个问题没有通用 CSS 解法，得靠 JS 监听 resize 并手动重设高度，或者干脆放弃全屏精确覆盖，改用 min-height: 100vh 留点余量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
