怎么通过HTML的CSS background-attachment: fixed实现背景图视差固定-html教程-PHP中文网

background-attachment: fixed 在移动端失效是因 ios 和 android webview 为性能与滚动一致性主动禁用该属性；替代方案包括 position: sticky 伪元素模拟、scroll-driven animation（现代浏览器）或节流的 js 方案。

怎么通过html的css background-attachment: fixed实现背景图视差固定

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

它在桌面端能实现“背景不动、内容滚动”的视差感，但绝大多数 iOS 和 Android WebView（包括 Chrome for Android）会直接忽略 background-attachment: fixed，或强制降级为 scroll。这是浏览器出于性能和手势滚动一致性的主动限制，不是你 CSS 写错了。

常见现象：background-attachment: fixed 在 Safari 或微信内置浏览器里完全没反应，DevTools 里样式还亮着，但视觉毫无固定效果。

iOS Safari 全面禁用该属性（从 iOS 7 起），连 transform: translateZ(0) 也救不回来
Android Chrome 80+ 默认禁用，仅对根元素（或）且无 overflow: hidden 等干扰时可能偶现生效
即使生效，也常伴随滚动卡顿、背景图错位或缩放失真

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

比 JS 方案更轻量、兼容性更好，适合单页中局部视差区域（比如 banner 区块）。核心是让背景图容器脱离文档流但随视口“粘住”。

关键点：position: sticky 必须配合 top（或 bottom）才生效，且父容器不能有 overflow: hidden 或 transform。

.parallax-section {
  height: 100vh;
  position: relative;
}
.parallax-section::before {
  content: "";
  position: sticky;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

必须用 ::before 或 ::after 伪元素承载背景，否则 sticky 在普通元素上对背景无效
父容器 .parallax-section 高度要明确（如 100vh），否则 sticky 无锚点
慎用 transform、will-change 等触发层叠上下文的属性，它们会让 sticky 失效

真正可靠的跨端方案：纯 CSS 的 transform + scroll-driven animation（现代浏览器）

Chrome 115+、Safari 17.4+、Firefox 119+ 支持 @scroll-timeline，可驱动背景位移，实现精准视差。虽然兼容性有限，但它是唯一不依赖 JS、不 hack、语义清晰的原生方案。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

原理：监听滚动进度，用 animation 控制背景的 background-position-y，速度比内容慢，形成视差。

@scroll-timeline parallax-timeline {
  source: selector(#scroller);
  orientation: vertical;
  start: 0px;
  end: 100vh;
}

.parallax-bg {
  animation: parallax 1s linear;
  animation-timeline: parallax-timeline;
}

@keyframes parallax {
  0% { background-position-y: 0; }
  100% { background-position-y: -50px; }
}