加 background-color 无效主因是层叠覆盖、元素无尺寸或透明度干扰；应检查计算样式、设宽高、注意父级透明及定位基准；推荐用 rgb/rgba，全局背景宜设 html 并重置 body margin。
直接给 body 或目标元素加 background-color 就行，但实际用的时候，90% 的问题出在层叠、继承和透明度上。
为什么加了 background-color 没生效？
最常见的是样式被覆盖，或者元素本身没尺寸、没内容、没定位导致“看不见背景”。比如空的 div 默认高度为 0，再鲜艳的背景也显示不出来。
- 检查是否被更具体的 CSS 规则覆盖（用浏览器开发者工具看“Computed”面板里
background-color最终值） - 确认元素有宽高：用
border: 1px solid red临时测试是否“存在” - 注意父元素是否设置了
background-color: transparent或用了opacity，会透出下层颜色 - 如果用了
position: absolute，得确保父容器有position: relative，否则定位基准错乱，视觉上像背景丢了
background-color 支持哪些写法？
别只记 #fff 和 red，不同写法影响可维护性和兼容性。IE8 只认命名色和十六进制，现代项目建议优先用 RGB/RGBA。
-
background-color: #f0f0f0—— 简洁，但难看出明暗变化 -
background-color: rgb(240, 240, 240)—— 易读，方便后续转成rgba() -
background-color: rgba(240, 240, 240, 0.8)—— 半透明，注意：它不会让文字变半透，只影响背景层 - 避免用
hsl()或hsla()在老项目中，部分 android webview 解析不稳定
全局背景色该加在 html 还是 body？
加在 body 是常规操作，但滚动时可能露白——因为 html 默认撑满视口，而 body 默认有 margin，且不继承 height: 100%。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：
html { background-color: #fafafa; }+body { margin: 0; } - 如果要用渐变或图片背景，必须加在
body上，html不支持background-image裁剪等高级特性 - 用
min-height: 100vh替代height: 100%，避免内容少时背景切掉
真正麻烦的不是怎么写这行代码，而是改完发现某块弹窗背景突然变深、某个卡片阴影被盖住、或者深色模式下硬编码的 #ffffff 直接糊成一片——背景色从来不是孤立属性，它总在和 color、box-shadow、backdrop-Filter 打架。