background-attachment: fixed 在移动端完全失效，是 iOS Safari 早废弃、Android Chrome 84+ 及微信/QQ 等 WebView 主动禁用所致；应改用 position: fixed + 独立 div 模拟，或 position: sticky 替代。

background-attachment: fixed 在移动端根本不起作用——不是你写错了，是 iOS Safari 早废弃、Android Chrome 84+ 默认忽略，微信、QQ、安卓原生 WebView 全部跟随。别调试，直接换方案。

为什么 background-attachment: fixed 在手机上完全失效

这不是 bug，是浏览器的主动策略：为避免滚动卡顿和内存暴涨，它们静默降级该声明为 scroll。DevTools 里样式明明“生效”，背景图却照常滚动；控制台不报错，也查不到原因。加 -webkit-background-attachment: fixed 或 transform: translateZ(0) 基本无效，还可能引入新层叠上下文导致更难排查。

用 position: fixed + 独立 div 模拟固定背景（最稳妥）

核心是把背景图从内容流中抽离，用一个脱离文档流的 <div> 全屏覆盖并压在最底层。

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

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

下载

• HTML 必须把背景层放在 <body> 最外层，和 <main> 同级：

  <body>
    <div class="bg-fixed"></div>
    <main class="content">...</main>
  </body>

• CSS 关键项不能漏：

  .bg-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
    pointer-events: none;
  }

• z-index: -1 是必须的，否则会遮挡所有点击区域
• 若页面有 position: fixed 的 header，别调低它的 z-index，而是给它加 background: rgba(255,255,255,0.95) 让背景“透出”
• 如果 body 设了 overflow-x: hidden，记得同步加到 .bg-fixed 上，否则横屏时可能溢出

用 position: sticky 替代（轻量但有约束）

适合不能插入额外 DOM 节点、或想减少绝对定位干扰的场景，但它对父容器要求苛刻。

立即学习“前端免费学习笔记（深入）”；

• HTML 结构仍需分离：

  <div class="bg-fixed"></div>
  <div class="content">...</div>

• CSS 中：

  .bg-fixed {
    position: sticky;
    top: 0;
    height: 100vh;
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
  }
  .content {
    position: relative;
  }

• 必须确保 .bg-fixed 的父容器没有 overflow: hidden，否则 sticky 会被截断
• 它只在视口顶部锚定，不支持真正的“视差”效果，滚动到底部后背景会消失

真正难的不是写那行 background-attachment: fixed，而是得随时判断当前 DOM 层级是否无意中触发了新层叠上下文——有时候删掉一行 transform，背景就突然钉住了。移动端固定背景，从来不是纯 CSS 问题，而是渲染机制、设备策略和结构设计的综合结果。