直接给body或html设background-color不一定生效，因body默认高度由内容决定、未清margin、易被background简写或父元素overflow/clip-path覆盖；需同时设body{margin:0;min-height:100vh}和html{height:100%}，并优先用CSS而非废弃的bgcolor属性。
直接给 body 或 html 元素设置 background-color 就能生效，但只设一个往往不够——常见“背景只显示一小条”或“滚动时露白边”，问题基本出在高度没撑满、浏览器默认边距没清、或被其他样式覆盖。
为什么只写 body { background-color: #eee; } 不一定填满整个视口
因为 body 默认高度由内容决定，空页面或内容少时，body 高度可能远小于窗口；而 html 元素也不自动占满 100vh。结果就是背景色只出现在文字周围，上下/左右留白。
- 必须同时处理：清空默认外边距（
body { margin: 0; }） + 确保最小高度撑满（body { min-height: 100vh; }） - 更稳妥的写法是双保险：
html { height: 100%; }+body { margin: 0; min-height: 100vh; } - 如果用了 CSS 重置库（如 Normalize.css 或 Bootstrap），检查是否被
body { background: transparent; }覆盖了
background-color 和 bgcolor 别混用
bgcolor 是 HTML4 的废弃属性，现代 HTML5 文档中写 <body bgcolor="#fff"> 不会报错，但 Chrome/Firefox/Safari 都忽略它——你改了却看不到效果，纯属白调。
- 合法且唯一推荐的方式是 CSS 的
background-color - 内联写法：
<body style="background-color: #f0f0f0;">—— 适合快速验证，但别长期堆在 HTML 里 - 颜色值优先用十六进制（如
#222）或 RGBA（如rgba(0, 0, 0, 0.05)），比white或rgb(255,255,255)更可控、不易受系统主题干扰
背景色不显示？先查这三件事
写了 background-color: red 却还是白底，大概率不是语法错，而是渲染层被卡住了。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 元素本身没有尺寸：空
<div></div>高度为 0，再亮的背景也看不见；加min-height: 100px或内容测试 - 被
background-image或简写background覆盖了：比如写了background: url(bg.jpg);，它会清掉之前所有background-相关属性，包括颜色 - 父容器有
overflow: hidden、clip-path，或子元素用了position: absolute后定位出界，导致背景区域被裁掉
深色模式下背景色“失效”怎么办
部分浏览器（Safari、Edge）开启深色模式后，若页面没声明 color-scheme，会悄悄把 background-color: white 换成浅灰，甚至反色文字——你写的 CSS 没变，但视觉上像没起作用。
- 基础防御：在
<meta>中声明color-scheme: light dark; - 主动适配：用
@media (prefers-color-scheme: dark)手动设深色背景，但注意安卓 WebView 兼容性差，且系统切换时不自动重绘 - 更可靠的做法是用
data-theme+ JS 监听matchMedia变化，动态切 class，避免依赖媒体查询的“一次性快照”
真正麻烦的从来不是怎么写那行 background-color，而是它背后牵扯的高度计算、层叠顺序、框架干预和系统级主题策略——调背景色前，先打开开发者工具看 computed 样式，比猜快十倍。
