怎样在移动端CSS中实现全屏背景图不随页面滚动_设置background-attachment-fixed-css教程-PHP中文网

background-attachment: fixed 在移动端完全失效，是 ios safari 早废弃、android chrome 84+ 及微信/qq 等 webview 主动禁用所致；应改用 position: fixed + 独立 div 模拟，或 position: sticky 替代。

怎样在移动端css中实现全屏背景图不随页面滚动_设置background-attachment-fixed

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

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

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

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

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

下载

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

核心是把背景图从内容流中抽离，用一个脱离文档流的 <div> 全屏覆盖并压在最底层。 <ul> <li>HTML 必须把背景层放在 <code> 最外层，和 <main></main> 同级：

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

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;
}