直接用body { background-color: #f0f0f0; }显式设置背景色，并同时为html和body添加min-height: 100vh，才能确保全屏生效且兼容各种场景。
直接改 body 的 background-color 就行
不用 JS、不用 HTML 属性，纯 CSS 一行就能生效。浏览器默认给 body 设了白色背景，但这个“默认”不保险——某些重置样式（比如 Normalize.css）或深色模式下可能变透明或变黑，所以必须显式写出来。
常见错误是只写：body { background: #eee; }，漏掉 -color 后缀。这实际调用的是 background 复合属性，会清空所有背景相关设置（比如你之前设的图片、渐变、repeat 等），容易引发连锁问题。
- 正确写法：
body { background-color: #f0f0f0; } - 颜色值支持：十六进制（
#333）、RGB（rgb(51, 51, 51)）、关键字（lightgray），但别用transparent当兜底——它会继承父元素（html）背景，而html默认没背景，结果就是白屏或透出底层内容 - 如果页面用了框架（如 Bootstrap、Tailwind），先检查是否被
body { background: transparent; }覆盖了，用浏览器开发者工具的 Styles 面板点开body，看哪条规则被划掉
html 和 body 都得设 min-height: 100vh
只设 body 背景色，但内容很少时，背景色只在文字高度范围内显示，下方一大片空白——不是没生效，是 body 高度不够。根本原因是 html 和 body 默认不撑满视口。
- 必须同时加：
html { min-height: 100vh; }和body { min-height: 100vh; background-color: #f0f0f0; } - 别用
height: 100%，它依赖父容器高度，而html的父容器是视口，但百分比在根元素上行为不稳定，100vh更可靠 - 移动端 Safari 对
100vh有兼容问题（地址栏收起/展开时高度跳变），可加@supports (height: 100dvh) { html { min-height: 100dvh; } }作为升级方案
用 background 复合属性时颜色必须放最前面
想同时加背景色和背景图，不能分开写两行：background-color + background-image，因为后写的会覆盖前写的。必须用 background 一条声明搞定，且顺序严格：颜色 → 图片 → 定位 → 尺寸。
- 正确示例：
body { background: #f0f0f0 url(./bg.jpg) no-repeat center/cover; } - 斜杠
/前是background-position（这里是center），后面是background-size（这里是cover），写反了会解析失败，图就消失 - 如果图加载失败或路径错，
#f0f0f0会自动兜底显示——这是唯一靠谱的容错方式；靠background-color单独声明做不到这点 - 别用
background: url(...) #f0f0f0，颜色放后面会被忽略
动态换色时别直接改 document.body.style.backgroundColor
JS 改背景色看似简单，但直接操作 style 属性会污染内联样式，后续用 CSS 类切换主题时优先级冲突，很难覆盖。
- 推荐做法：定义好 CSS 变量，JS 只改变量值：
document.documentElement.style.setProperty('--bg-color', '#333');，然后 CSS 里写body { background-color: var(--bg-color, #f0f0f0); } - 如果必须用 class 切换，确保 class 的选择器权重 ≥ 当前样式，比如用
.theme-dark body而不是单个.dark - 避免用
opacity模拟半透明背景——它会让整个body内容变淡，正确做法是用rgba(0, 0, 0, 0.1)或hsla(0, 0%, 0%, 0.1)直接设颜色
最容易被忽略的是：背景色生效范围取决于元素的实际渲染高度，而不是“看起来有没有内容”。哪怕页面只有几行字，也要靠 min-height: 100vh 把 html 和 body 同时拉满，否则换再多次颜色，底下那块空白永远是浏览器默认色。
