background-attachment: fixed 在移动端根本不起作用，是 ios safari 和大多数安卓 webview 主动禁用该属性以避免滚动卡顿，会静默降级为 scroll；可靠替代方案是用 position: fixed 模拟，需新建 body 直接子元素 div 并设 position: fixed、top/left/width/height 铺满视口、z-index: -1。
background-attachment: fixed 在移动端根本不起作用
这不是你代码写错了，是 iOS Safari 和大多数安卓 WebView 主动禁用该属性。它会静默降级为 scroll，DevTools 里样式明明存在，但背景图照常滚动。原因很实际：每次滚动都要重绘整个视口背景，性能太差，浏览器直接砍掉。
常见现象包括：background-attachment: fixed 在桌面 Chrome 看着正常，一上手机就失效；长页面滚动卡顿；iOS 上 body 或 html 元素完全不响应该值。
实操建议：
- 别在生产环境依赖
background-attachment: fixed做核心视觉效果，尤其当用户含移动端时 -
@supports (background-attachment: fixed)可用于渐进增强，但不能作为主方案 - 检查父级是否隐式创建层叠上下文：
transform、opacity、filter、will-change都会让fixed失效——哪怕只写了transform: translateZ(0)
用 position: fixed 模拟固定背景的正确写法
这是目前最稳定、跨端兼容的替代方案。核心是脱离文档流、铺满视口、压底不遮挡。
实操建议：
- 新建一个
<div class="bg-fixed"></div>，必须作为的直接子元素（不能嵌套在.container或.row里） - CSS 必须包含：
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; -
z-index: -1是硬性要求，否则会盖住所有内容；若body有overflow-x: hidden，记得同步加到.bg-fixed上 - 如果页面有固定定位的
header，别指望靠z-index把它压到背景层下面——更稳妥的是让header自带半透明背景或镂空设计
position: sticky 模拟方案的适用边界
position: sticky 能在部分场景下模拟固定背景，但它不是万能替代，且限制极多。
实操建议：
- 仅当背景容器是
body直接子元素、且无transform/perspective/filter干扰时才可能生效 -
height: 100vh必须显式设置，否则sticky无法锚定 - iOS 15+ 对
sticky支持有所改善，但安卓 WebView 仍不稳定，不建议在关键路径使用 - 比起
fixed方案，sticky更难调试：滚动时背景突然“跳一下”或“卡半截”，大概率是父容器触发了层叠上下文或高度计算异常
图片和性能相关的隐形坑
即使布局写对了，大图、高分辨率或不当缩放也会让固定背景卡顿甚至错位。
实操建议：
- 背景图分辨率控制在 2x 视口宽高以内，超大会吃 GPU 内存，尤其在 iOS 上容易触发内存警告
- 优先用
background-size: 100% 100%替代cover，避免每次滚动都重采样 - 慎用
will-change: transform提升合成效率——它本身会强制创建新图层，增加内存开销 - 键盘弹出时，iOS Safari 会重算视口高度，
100vh可能变小导致背景露白，可用min-height: 100dvh（需检查兼容性）或 JS 动态修正
background-attachment: fixed，而是得随时判断当前 DOM 结构、CSS 层叠规则、目标设备的渲染引擎是否允许它按预期工作。很多时候，换种思路比硬刚属性更省事。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
