HTML怎么设置图片背景固定不动_网页背景特效【教程】-html教程-PHP中文网

background-attachment: fixed 在 ios safari 完全失效，chrome 遇 transform/will-change 会静默降级；需配合 margin:0、min-height:100vh、background-size:cover、background-position:center center、background-repeat:no-repeat 才生效，移动端须用 body::before 伪元素模拟并设 pointer-events:none 和 z-index:-1。

html怎么设置图片背景固定不动_网页背景特效【教程】

background-attachment: fixed 在 iOS Safari 上完全不生效，Chrome 遇到 transform 或 will-change 会静默禁用——别只写这一句，否则大概率白忙。

background-attachment: fixed 为什么在 body 上没反应

不是代码漏了，而是浏览器悄悄“降级”了：只要 body 或 html 上有 transform、filter、will-change、opacity，fixed 就不再锚定视口，而是锚定这个局部容器。典型表现是背景随内容一起滚动，或只在首屏显示。

body { transform: translateZ(0) }（为硬件加速加的）会直接废掉 fixed
html { filter: blur(0.5px) } 同样触发降级，哪怕值是 none 也不行
body { height: 100%; overflow: auto } 会让 body 自身变成滚动容器，fixed 就相对它了
验证方式：开发者工具里临时删掉所有非基础样式，只留 background-attachment: fixed 等核心属性，看是否恢复

必须配齐的五个 CSS 属性才能让 fixed 生效

只写 background-attachment: fixed 是无效的。它依赖其他四个属性协同工作，缺一不可：

margin: 0 —— 清除 body 默认外边距，否则固定区域错位
min-height: 100vh —— 不用 height: 100%，避免因父容器高度未定义导致背景只覆盖首屏
background-size: cover —— 小图拉伸变形、大图只露一角，都是因为没设这个
background-position: center center —— 居中是视觉稳定的底线，尤其配合 cover 时
background-repeat: no-repeat —— 否则平铺会干扰“固定感”，甚至盖住文字

完整最小可用写法：

Moshi Chat

Moshi Chat是一款由 Kyutai 推出的实时语音对话 AI 模型与聊天演示。

下载

body {
  margin: 0;
  min-height: 100vh;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-attachment: fixed; /* Safari 旧版兼容 */
}

移动端必须用 body::before 模拟 fixed 效果

iOS Safari 所有版本彻底不支持 background-attachment: fixed，Android Chrome v56+ 也静默降级为 scroll。此时唯一可靠方案是伪元素模拟：

必须加 pointer-events: none，否则伪元素会拦截所有点击事件（这点极容易漏）
z-index: -1 是硬性要求，设成 0 或 1 会遮住全部内容
宽高必须用 100vw 和 100vh，不用 %，否则 iOS 横屏时右边缘可能露白
body { margin: 0 } 必须存在，否则伪元素位置偏移

示例：

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