background-attachment: fixed 失效主因是 body 未占满视口，需同时设置 html, body { height: 100%; margin: 0; padding: 0; } 且 background-attachment 必须写在 body 上。
直接加 background-attachment: fixed 就行，但只写这一句大概率失效——因为 body 默认高度不够，且存在默认 margin。
为什么 background-attachment: fixed 不生效？
最常见原因是：body 没占满视口（viewport），而 background-attachment: fixed 是相对于视口定位的。如果 body 高度只有内容那么高，背景图就只能固定在那一小块区域里，一滚动就“消失”。
典型表现：图片只在首屏显示，往下滚就变白；或整页背景压根不出现。
- 必须同时设置
html, body { height: 100%; margin: 0; padding: 0; } -
body单独设height: 100vh有时也不够——比如内容超出一屏时，100vh只撑开首屏，后续区域无背景 - 移动端 Safari 对
fixed背景支持不稳定，尤其配合overflow: hidden或transform时
推荐的最小可用 CSS 写法
把这段塞进 <style> 或外部 CSS 文件里，路径换成你自己的图片：
立即学习“前端免费学习笔记（深入）”；
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: url('bg.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
注意：background-attachment: fixed 必须写在 body 上，不能只写在 html；也不能用 div 模拟背景再设 position: fixed——那样会脱离文档流，影响滚动锚点和可访问性。
路径和加载失败怎么办？
图片不显示，90% 是路径问题。相对路径以 HTML 文件为基准，不是以 CSS 文件位置为准（除非你用的是外部 CSS 且没调整路径）。
- 内联样式中写
url('images/bg.jpg')，表示和index.html同级的images/目录下 - 外部 CSS 中写
url('../images/bg.jpg')，表示从 CSS 文件所在目录往上退一级再进images/ - 加
background-color: #eee作后备色，避免图片加载失败时一片空白 - 别用中文路径或空格，浏览器解析容易出错
移动端 fixed 背景卡顿或失效？
iOS Safari 和部分安卓 WebView 会禁用或降级 background-attachment: fixed 以保性能，尤其在页面有 transform、will-change 或复杂滚动时。
务实解法：
- 用媒体查询降级：
@media (max-width: 768px) { body { background-attachment: scroll; } } - 改用
position: fixed的img标签 +z-index: -1，但要手动处理object-fit: cover和宽高适配 - 接受它“不固定”，优先保证加载速度和文字可读性——全屏背景图在手机上本就容易干扰内容
真正难的不是加那行 CSS，而是判断什么时候不该加。背景图固定是视觉技巧，不是功能刚需；一旦影响滚动流畅性或文字对比度，就得砍掉。
