index.html里如何设置背景图片不跟随滚动？-html教程-PHP中文网

background-attachment: fixed 失效主因是父容器触发层叠上下文或设置transform/filter等属性导致局部滚动；应设于body、避免html/body的transform/filter、禁用height:100%+overflow:auto组合，并为safari加-webkit前缀。

index.html里如何设置背景图片不跟随滚动？

background-attachment: fixed 为什么有时失效？

直接写 background-attachment: fixed 却发现背景图还是跟着滚，大概率是因为父容器触发了新的层叠上下文或设置了 transform、will-change、filter 等属性——这些会让浏览器强制创建局部滚动容器，从而“劫持”fixed行为。

常见踩坑点：

body 或 html 上加了 transform: translateZ(0)（为硬件加速）
使用了 overflow: hidden + position: relative 的 wrapper
用 backdrop-filter 或 opacity 影响了根元素渲染层级

最简验证方式：临时移除所有非必要 CSS，只保留 body { background: url(...) no-repeat center center; background-attachment: fixed; background-size: cover; }，看是否生效。

如何确保 background-attachment: fixed 在现代浏览器中稳定工作？

关键不是加更多 hack，而是守住两个前提：背景必须设在「滚动容器」本身，且该容器不能被降级为局部视口。

推荐做法：

把背景图设置在 body 元素上，而不是 div#app 或其他内部容器
确认 html 和 body 都没有 transform、perspective、filter 值（哪怕只是 filter: none 也不行）
避免给 body 设置 height: 100% 或 min-height: 100vh 后再加 overflow: auto —— 这会让 body 变成滚动容器，fixed 就相对于它了
如需兼容 Safari iOS，加 -webkit-background-attachment: fixed（虽然新版已基本支持原生值）

示例最小可行 CSS：

Wechat HTML Publisher

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

下载

body {
  margin: 0;
  background: url('bg.jpg') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  background-color: #000;
}

替代方案：当 fixed 真的不可用时怎么办？

比如你必须在某个带 transform 的全屏组件里实现视差背景，或者要适配不支持 fixed 的旧 WebView，就得换思路。

可行路径：

用 position: sticky + 大负 top 模拟（仅适用于单页顶部区域）
监听 scroll 事件，动态修改背景的 background-position（注意节流，用 requestAnimationFrame）
改用 <img> + position: fixed + z-index: -1，并设 width: 100vw; height: 100vh; object-fit: cover; —— 这绕过了 CSS 背景的渲染限制