CSS如何让背景图不随滚动条滚动_利用background-attachmentfixed-css教程-PHP中文网

background-attachment: fixed 在移动端失效是浏览器主动禁用，因导致卡顿和内存问题；iOS Safari 早已废弃，安卓 WebView 多数跟随；可用 position: sticky 模拟或 requestAnimationFrame 节流的 JS 方案替代。

css如何让背景图不随滚动条滚动_利用background-attachmentfixed

background-attachment: fixed 为什么在移动端失效

它在 iOS Safari 和大部分安卓 WebView 里压根不工作，不是你写错了，是浏览器故意禁用的。iOS 从很早开始就废弃了对 background-attachment: fixed 的支持，因为会导致滚动卡顿和内存问题。

常见错误现象：background-attachment: fixed 在桌面 Chrome 正常，一到手机上背景图就跟着滚——这不是 bug，是标准行为。

安卓原生浏览器、微信内置浏览器、QQ 浏览器基本都跟随 iOS 策略，忽略该声明
即使加了 -webkit-background-attachment: fixed 也没用
某些 Android Chrome 版本会部分支持，但触发条件苛刻（比如必须开启硬件加速 + 父容器有 transform）

替代方案：用 position: sticky 模拟固定背景

核心思路是把背景图“提出来”，用一个独立的 <div> 层叠在内容下方，并让它随视口固定定位。<p>使用场景：全屏轮播头图、视差滚动首屏、品牌展示页顶部大图。</p> <ul> <li>给背景容器设 <code>position: sticky + top: 0，再配合 z-index: -1 压到内容下层

必须确保父容器没有 overflow: hidden，否则 sticky 会被截断

背景图用 background-size: cover + background-position: center 防止拉伸错位

 <div class="bg-fixed"></div>
<div class="content">正文</div>
<p>.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; }</p>

兼容性更强的 JS 方案：监听 scroll 手动更新 background-position

当需要精确控制或做视差效果时，CSS 已经不够用了，得靠 JS 动态算偏移量。

容易踩的坑：scroll 事件高频触发导致卡顿，尤其在低端机上。

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

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

下载

务必用 requestAnimationFrame 节流，别直接绑 addEventListener('scroll', ...)
读取 window.scrollY 后，计算出反向偏移值，赋给 background-position-y
注意 Safari 对 background-position 的 CSS 变量支持较晚，建议用 element.style.backgroundPosition

示例关键逻辑：

let ticking = false;
function updateBg() {
  const y = window.scrollY * 0.5; // 视差系数
  document.body.style.backgroundPosition = `center ${y}px`;
  ticking = false;
}
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(updateBg);
    ticking = true;
  }
});