最直接设置背景色应使用内联 style 的 background-color，如 ；避免已废弃的 bgcolor 属性；注意 html 与 body 的高度差异及深色模式兼容性。
用 style 里写 background-color 最直接
绝大多数时候，你不需要动外部 css 文件或 js，直接在 标签里加内联样式就行。浏览器渲染快、兼容性好，连 ie6 都支持。
常见错误是写成 bgcolor（老式 HTML4 属性），现代 HTML5 已废弃，Chrome/Firefox 会忽略它，但不报错——结果就是背景色没变，你还得来回检查拼写。
-
—— 推荐，明确、可控 -
—— 别用，HTML5 不认 - 颜色值优先用十六进制（
#fff或#ffffff），比rgb(255,255,255)更轻量，也比white这类关键字更不易受用户系统主题干扰
CSS 中设置 body 或 html 的背景色有区别
如果你用外部 CSS 或 <style></style> 块，得注意：只设 body { background-color: #eee; }，页面内容少时可能看不到效果——因为 body 高度默认由内容撑开，空页就只剩顶部一小条灰。
真正填满视口的，是 html 元素。所以稳妥写法是两者都设，或只设 html：
-
html { background-color: #1a1a1a; }—— 覆盖整个初始视口，最可靠 -
body { margin: 0; background-color: #1a1a1a; }—— 加margin: 0防浏览器默认边距露白边 - 别漏掉
html { height: 100%; }，否则某些布局下html高度不够，背景仍会“断层”
透明背景或渐变时，background-color 会被覆盖
一旦你用了 background-image（比如渐变、图片），background-color 不会消失，而是变成“后备色”——只有图片加载失败或不支持时才显示。但如果你写了 background: linear-gradient(...);，它会**完全替换**所有 background 相关属性，包括 color。
- 想保留底色又加渐变：用
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), #222;—— 多层背景，逗号分隔 - 透明度要谨慎：直接写
background-color: rgba(0,0,0,0.5);会让文字内容也透出底层，通常不如用半透层 div 或 backdrop-filter - 渐变在 Safari 旧版需加
-webkit-linear-gradient前缀，但仅限 iOS 12 / macOS 10.14 及更早；现在可不加
深色模式下背景色可能被系统强制覆盖
部分浏览器（如 Safari、Edge）开启深色模式后，若页面没声明 color-scheme，它们会悄悄把 background-color: white 换成浅灰，甚至把文字反色——你写的颜色没变，但视觉上“失效”了。
- 加
<meta name="color-scheme" content="light dark">告诉浏览器你支持两种模式 - 用
@media (prefers-color-scheme: dark)主动控制：body { background-color: #121212; } - 别依赖
background-color: #fff当“绝对白色”，它在深色模式下可能被映射为#f5f5f5，导致与其它元素对比度不足
背景色看着简单，但跨设备、跨模式、跨加载状态时，实际生效的往往不是你写的那一行。盯住渲染结果，而不是代码是否“写对了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
