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 + 单独
  层模拟背景（见下一条）

  用 position: fixed 模拟固定背景图的正确写法

  核心是脱离文档流、铺满视口、z-index 压底，同时避免遮挡内容。容易漏掉的关键点比想象中多。

  实操建议：

  • 新建一个
    放在 最外层（不是某个 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 很少用，但一旦误配就导致背景“撕裂”：滚动容器内文字动了，背景却卡在原位不动，像贴在容器边框上。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

  常见场景是给 textarea 或自定义滚动区域（overflow: auto）设背景时选错了值。

  实操建议：

  • background-attachment: scroll —— 背景随整个页面滚动（默认值）
  • background-attachment: local —— 背景随容器内容滚动（仅当容器自身可滚动且内容超出时才生效）
  • background-attachment: fixed —— 背景相对于视口固定（如前所述，移动端基本无效）
  • 对普通块级元素（无 overflow），local 和 scroll 表现完全一样，没区别

  fixed 定位背景图的性能与可访问性隐患

  用 position: fixed 模拟时，如果图片大或没压缩，首次渲染卡顿明显；更隐蔽的问题是屏幕阅读器可能忽略这个纯装饰性

  ，但若它承载了关键视觉信息（比如品牌图案+文案），就会造成信息缺失。

  实操建议：

  • 图片务必 WebP 格式 + background-size: cover + background-position: center，避免拉伸模糊
  • 加 aria-hidden="true" 明确告诉辅助技术这是装饰性元素
  • 如果背景图含重要文字或图标（例如 banner 上的 slogan），必须用真实 HTML 元素实现，不能靠背景图承载
  • 测试滚动帧率：打开 Chrome DevTools → Rendering → 勾选 “FPS Meter”，滑动看是否稳定在 60fps

  固定背景看似简单，真正落地时最麻烦的从来不是写哪行 CSS，而是判断“这个效果是否值得为它增加 DOM 节点、放弃移动端原生支持、并承担额外的性能和无障碍成本”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！