HTML背景图片固定不动怎么弄_HTML背景图片固定设置【样式】_技术教程

最可靠方案是用伪元素模拟：body::before { position: fixed; background-image: url('bg.jpg'); z-index: -1; pointer-events: none; }，因background-attachment: fixed在Safari iOS等环境不支持且性能差。

背景图片固定不动，核心是用 background-attachment: fixed，但它在现代浏览器（尤其是移动端和 Safari）中存在兼容性与性能问题，不能无脑套用。

background-attachment: fixed 的基本写法

这是最直接的实现方式，让背景图随视口滚动而“静止”，产生视差效果：

body {
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

注意：background-attachment: fixed 只对 body 或设置了 overflow: hidden 的容器生效时才稳定；在普通滚动容器里可能被忽略。

必须配合 background-position 和 background-size 才能保证居中与缩放合理
若父容器有 transform（如 translateZ(0)）、perspective 或 will-change，某些 Chrome 版本会强制禁用 fixed
Safa
ri 在 iOS 上完全不支持 background-attachment: fixed（包括 body 和任何元素）

移动端失效？用伪元素模拟 fixed 效果

当 background-attachment: fixed 在 iOS 或安卓 WebView 中彻底失效时，主流解法是用 ::before 伪元素 + position: fixed：

body {
  margin: 0;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
}

关键点：