body background属性被HTML5标准彻底删除，必须用CSS三种写法替代：内联style、内部CSS或外部CSS；JS动态切换需改style.backgroundImage或切换预定义class；移动端需注意fixed失效及半透背景兼容性。
body background属性为什么完全失效
它不是“偶尔不生效”，而是被 HTML5 标准彻底删除。浏览器解析时直接跳过 background 属性，既不报错也不渲染——哪怕你写成 <body background="bg.jpg">，控制台可能显示 Unknown property 'background'，DOM 中读取 document.body.background 永远返回空字符串。
必须用 CSS 替代的三种写法
只有这三种路径真正有效，其他都属容错或偶然行为：
- 内联 style：
<body style="background-image: url(bg.jpg); background-repeat: no-repeat; background-size: cover;"> - 内部 CSS：
<style>body { background-image: url(bg.jpg); background-repeat: no-repeat; background-size: cover; }</style> - 外部 CSS：在 .css 文件中写
body { background-image: url(./images/bg.jpg); }（注意路径以 CSS 文件为基准）
别用 background: url(...) no-repeat center/cover 简写——后续 JS 改 background-color 会整个覆盖掉这个简写值，导致背景图消失。
动态切换背景图时的坑
JS 不能碰 document.body.background，它是只读属性。正确做法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 直接改内联样式：
document.body.style.backgroundImage = "url(new.jpg)"; - 切换预定义 class：
document.body.classList.replace("bg-a", "bg-b");，CSS 中提前写好.bg-a { background-image: url(a.jpg); } .bg-b { background-image: url(b.jpg); }
用 classList.replace() 比 className = "bg-b" 更安全，避免意外清掉其他 class；如果要兼容 IE11，可用 className + 字符串拼接，但得自己处理空格和重复。
移动端和透明背景的特殊处理
background-attachment: fixed 在 iOS Safari 上会被静默降级为 scroll，视差效果直接失效，别依赖它做关键动效。
设半透背景时，background-color: rgba(0,0,0,0.8) 比 hsla() 或命名色（如 black）更稳妥——部分 Android WebView 对后者支持异常。
若页面内容高度不足一屏，body 背景色可能只显现在内容区，底部露白。必须同时设：html { min-height: 100vh; } body { min-height: 100vh; margin: 0; }。
