background-attachment: fixed 在移动端失效，因iOS Safari和Android Chrome为性能默认禁用，静默降级为scroll；应改用position: fixed + 单独div模拟，并注意z-index、视口铺满及无障碍处理。
background-attachment: fixed 为什么在移动端失效
因为大多数移动浏览器（包括 iOS Safari 和 Android Chrome）为节省资源和提升滚动性能，直接禁用了 background-attachment: fixed。你写上它，页面看起来和 scroll 没区别，控制台也不会报错，纯静默降级。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
background-attachment: fixed做“视差”或“固定背景”效果，尤其当目标用户含移动端时 - 用
@supports (background-attachment: fixed)做渐进增强，但别把它当主方案 - 真要兼容，改用
position: fixed+ 单独<div> 层模拟背景（见下一条） <h3>用 position: fixed 模拟固定背景图的正确写法</h3> <p>核心是脱离文档流、铺满视口、z-index 压底，同时避免遮挡内容。容易漏掉的关键点比想象中多。</p> <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><div class="bg-fixed"></div>放在最外层（不是某个 section 里） - CSS 必须包含：
.bg-fixed { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: url(...); background-size: cover; background-position: center; z-index: -1; } -
z-index: -1是必须的，否则会盖住所有内容；若页面有body { overflow-x: hidden }，记得也加到.bg-fixed上，不然横屏时可能溢出 - 如果页面有 header 固定定位，这个背景层默认也会被 header 盖住——除非 header 的
z-index明确设得比 0 小（不推荐），更稳妥是让 header 自带背景色/透明度，视觉上“透出”背景
background-attachment: local 和 scroll 的实际差异
local 很少用，但一旦误配就导致背景“撕裂”：滚动容器内文字动了，背景却卡在原位不动，像贴在容器边框上。
常见场景是给 textarea 或自定义滚动区域（overflow: auto）设背景时选错了值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
background-attachment: scroll—— 背景随整个页面滚动（默认值） -
background-attachment: local—— 背景随容器内容滚动（仅当容器自身可滚动且内容超出时才生效） -
background-attachment: fixed—— 背景相对于视口固定（如前所述，移动端基本无效） - 对普通块级元素（无
overflow），local和scroll表现完全一样，没区别
fixed 定位背景图的性能与可访问性隐患
用 position: fixed 模拟时，如果图片大或没压缩，首次渲染卡顿明显；更隐蔽的问题是屏幕阅读器可能忽略这个纯装饰性 <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>图片务必 WebP 格式 + <code>background-size: cover + background-position: center，避免拉伸模糊
aria-hidden="true" 明确告诉辅助技术这是装饰性元素
