应使用 background-color css 属性设置背景色，禁用已废弃的 bgcolor 属性；body 背景需设在 body 上并配合 min-height: 100vh 和 margin: 0；避免滥用 !important；深色模式推荐 data-theme + js 方案。
用 background-color 直接设背景色，别碰 bgcolor
HTML 里没有合法的 bgcolor 属性（老浏览器时代遗留，HTML5 已废弃），现在必须用 CSS 控制背景。最直接的方式是给元素加 style="background-color: #fff;"，或者写在外部样式表里。
常见错误：在 里硬塞 bgcolor，现代浏览器虽可能兼容，但会触发 HTML 验证失败，且无法和 CSS 优先级、响应式逻辑配合。
-
background-color支持颜色名（"red"）、十六进制（"#333"）、RGB（"rgb(51, 51, 51)"）、RGBA（"rgba(0,0,0,0.1)"） - 透明度要用
rgba()或hsla()，#rrggbb和颜色名都不支持 alpha - 如果设了
background-image，background-color会作为图片未加载或透明区域的兜底色
body 全局背景色要设在 body 上，不是 html
很多人写 html { background-color: #eee; }，结果滚动时顶部/底部露出白边——这是因为 html 元素默认不占满视口高度，而 body 才是内容容器的实际载体。
正确做法是给 body 设背景，并确保它撑满整个可视区：
立即学习“前端免费学习笔记（深入）”；
body {
margin: 0;
min-height: 100vh;
background-color: #f8f9fa;
}
注意：min-height: 100vh 比 height: 100vh 更安全，避免内容超长时被截断；margin: 0 是为了消除浏览器默认 body 的 8px 外边距。
按钮/卡片等组件背景色慎用 !important
当你在组件里写 button { background-color: #007bff !important; }，短期看着生效，但后续想用 JS 动态切换主题、或用 :hover/:disabled 状态覆盖时，就会卡住——因为 !important 会破坏 CSS 层叠顺序。
更可持续的做法是提升选择器特异性，比如：
- 用类名组合：
.btn-primary:hover而不是button:hover - 把状态样式放在基础样式之后（顺序即优先级）
- 需要 JS 控制时，用
element.style.backgroundColor = "..."，它天然高于 CSS 规则
深色模式下背景色别只靠 prefers-color-scheme 硬切
写 @media (prefers-color-scheme: dark) { body { background-color: #121212; } } 看似简单，但实际容易翻车：用户手动切换系统主题时，页面不会自动重绘；部分安卓 WebView 不支持该媒体查询；还有“浅色界面+深色文字”这类混合需求。
更稳妥的路径是：
- 用
data-theme="light"或data-theme="dark"写在html标签上，JS 控制切换 - CSS 中用属性选择器：
html[data-theme="dark"] body { background-color: #1e1e1e; } - 初始化时读取
window.matchMedia("(prefers-color-scheme: dark)").matches设默认值
真正麻烦的是渐变背景、图片背景、SVG 图标填充色这些——它们没法靠单一 background-color 解决，得拆开单独适配。
