直接给body设background-color即可，但常因margin:8px、高度塌陷、框架覆盖（如bootstrap设transparent）或html背景遮挡而失效；需同时设html,body{margin:0;min-height:100vh;}并用高对比色调试。
直接给 body 写 background-color 就行，但很多人改了没反应，问题几乎都出在样式优先级、高度塌陷或透明继承上。
为什么 body 设了颜色却看不见？
浏览器默认给 body 加了 margin，且它的高度只包裹内容——如果页面内容少，body 实际就只有几行高，背景色自然只显一小条。更常见的是被框架重置覆盖，比如 Bootstrap 里有 body { background: transparent; }，或者用了 html { background: #fff; } 把 body 的背景挡住了。
调试时先加这三行：
html, body {
height: 100%;
margin: 0;
background-color: red;
}
确认红色铺满全屏后再换目标色。别跳过 html 这一层——它才是视觉上的“根容器”。
background-color 值怎么选才不出错？
用十六进制（如 #c7edcc）最稳妥，兼容性好、无歧义；英文名（如 lightgreen）少用，不同浏览器渲染可能不一致；RGBA 和 HSLA 要特别小心 alpha 通道——rgba(0, 0, 0, 0.1) 看似设了黑，实际是 90% 透明，底下滚动条或父容器颜色会透上来，误以为“没生效”。
- 护眼绿推荐用纯色
#c7edcc，不是rgba(199, 237, 204, 1)（后者冗余且易手误漏写 alpha） - 想兼容深色模式？别硬写死值，改用
background-color: color-mix(in srgb, #c7edcc 80%, Canvas 20%)（需现代浏览器） - 避免用
transparent当“无背景”，它会继承父元素（通常是html），容易造成视觉断层
哪些地方会偷偷覆盖 body 的背景？
框架、插件、甚至浏览器自带功能都可能介入。比如：
- Bootstrap 5 默认设了
body { background: transparent; }，得手动覆盖 - 夸克/百度浏览器的“夜间渲染”或“护眼模式”会在 DOM 上注入
style标签，优先级高于外部 CSS，必须加!important才能顶掉（临时调试可用，线上慎用） - Safari 的自定义样式表走的是浏览器级注入，会压过页面内联样式，但对
iframe子页无效 - 页面里写了
这种老式属性？它会被 CSS 覆盖，且现代 HTML5 已不推荐
遇到覆盖，打开开发者工具，点中 body 元素，在 Styles 面板看哪条规则被划掉了——被划掉的就是被更高优先级干掉了。
固定定位遮罩层的背景色要单独设
像弹窗、加载蒙层这类 position: fixed 元素，它的背景色和 body 完全无关。即使你把 body 设成豆沙绿，遮罩层还是默认白色，除非你显式写：
.overlay {
background-color: #c7edcc;
/* 不要指望它继承 body */
}
这点特别容易忽略——用户以为开了护眼模式整个页面都绿了，结果点开一个弹窗，刺眼白底又回来了。
