body的background属性因被html5彻底删除而失效，必须用css的background-image等属性替代；bgcolor同理废弃，应改用background-color；所有旧式body属性均需迁移到css中实现。
body background属性为什么死活不生效
它不是“兼容性差”，而是被 HTML5 彻底删除了。浏览器解析时直接跳过 background 属性，不报错、不警告、也不渲染——哪怕你写 document.body.background = "bg.jpg"，读回来永远是空字符串。
常见错误现象：
- 页面没显示背景图，控制台却没报错
- 加 !important、换绝对路径、用 JS 动态赋值都没用
- 在 Chrome/Firefox/Safari 最新版中 100% 失效
- 真正有效的写法只有 CSS：
body { background-image: url(bg.jpg); } - 必须搭配
background-repeat和background-size控制行为，否则小图平铺、大图裁剪 - 内联写法最直白：
bgcolor也别碰，background-color才是正解
bgcolor 同样被 HTML5 彻底废弃。部分浏览器还能“凑合”渲染，但这属于容错机制，不是标准行为——Android WebView、旧版 Safari 或 严格模式下极易失效。
容易踩的坑：
- 写 看似生效，但 JS 无法读取或修改该值（document.body.bgcolor 返回 undefined）
- 命名色如 black 在某些 Android 内核里不认，推荐用十六进制、rgb() 或 hsl()
- 简单场景：用内联
style—— - 需要主题切换：走 class 预设，比如
+.dark-theme { background-color: rgba(0,0,0,0.95); } - 透明背景慎用
transparent，IE 衍生内核可能异常，优先选rgba()
动态改背景时，别碰 document.body.background
这个属性是只读的，赋值无效。想用 JS 切换背景图或颜色，必须操作样式或 class。
两种可靠做法：
- 直接改内联样式：document.body.style.backgroundImage = "url(new-bg.jpg)";
- 更健壮：用 class 切换，CSS 中预定义规则，比如 document.body.classList.replace("bg-a", "bg-b");
- 避免用
background简写（如background: url() no-repeat center/cover），后续 JS 改background-color会整个覆盖掉 - 移动端加
background-attachment: fixed要谨慎：iOS Safari 会静默降级为scroll，视差效果直接消失 - body 没撑满视口？补上
html { height: 100%; }和body { margin: 0; min-height: 100vh; }，否则滚动时顶部/底部闪白
text/link/vlink/alink这些颜色属性早就不归body管了
它们在 HTML4 是 的原生属性，但 HTML5 中已无对应 DOM 接口。JS 读 document.body.text 返回 undefined，设置也无效。
替代方案必须走 CSS 伪类和选择器：
- text → body { color: #333; }
- link → a:link { color: #0066cc; }
- alink → a:active { color: #ff3300; }
- vlink → a:visited { color: #663399; }
- 这些伪类只对
<a></a>标签有效，不能写成body:a:link - 不能写在内联
style里，必须放<style></style>或外部 CSS 文件中 - 注意层叠顺序：如果全局设置了
a { color: blue; }，再写a:link可能被覆盖，建议用更具体的选择器或加!important（仅限必要场景）
实际迁移中最容易被忽略的，是 body 默认有 margin: 8px，且 html 默认高度不等于视口——这两点会让背景色或图在滚动时“露馅”，光改 background 属性或 CSS 不够，必须同步重置 margin 和 height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
