直接用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 同时拉满，否则换再多次颜色，底下那块空白永远是浏览器默认色。