background-color 直接设置元素背景色，支持颜色名、十六进制、RGB/RGBA等值；需确保元素有尺寸才能显示；会被 background 简写覆盖；transparent 透出父背景；注意兼容性与层叠上下文影响。
background-color 设置背景颜色的基本写法
直接用 background-color 就能填满整个元素的背景区域，它不依赖其他属性，单独生效。值可以是颜色名（如 red）、十六进制（#ff6b35）、RGB（rgb(255, 107, 53)）或 RGBA（rgba(255, 107, 53, 0.8)）。
常见错误是以为设了 background-color 就一定看到颜色——其实如果元素没内容、没高度、没 padding 或 min-height，它就塌缩成一条线，颜色自然看不见。
- 给
<div> 设背景前，先确认它有尺寸：比如加 <code>height: 100px或min-height: 100vh - 想让背景铺满整个视口？别只设
body，记得也给html加background-color，否则可能只染到内容区 - RGBA 值里的 alpha 为 0 时，背景完全透明，但元素仍占位——这不是 bug，是正常行为
- 想保留底色又叠加图片/渐变？改用
background: linear-gradient(...), #eee;（多层语法），或者直接写全background: linear-gradient(...) #eee; - 调试时快速判断是不是被覆盖：在开发者工具里看
background-color这行是否被划掉（strikethrough） - Vue/React 组件内联样式常用
style="background-color: ..."，它比 CSS 规则优先级高，但也更容易被 JS 动态覆盖 - 要确保子元素完全不透出，除了设纯色，还得确认父元素没用
opacity或rgba背景（这两者影响后代渲染） - 用
background-color: inherit可以主动继承父级背景色，但对rgba或图片无效 - 暗色模式下，有些系统级颜色（如
Canvas）会动态变化，硬写#ffffff可能不如用Canvas关键字稳妥 - iOS 12 及更早版本中，
background-color在position: fixed元素上可能闪烁或失效，加transform: translateZ(0)可触发硬件加速修复 - Android 4.4 WebView 对
hsl()写法支持不稳定，建议在生产环境优先用十六进制或 RGB - CSS 自定义属性（
--bg: #333）配合background-color: var(--bg)在 IE 完全不支持，若需兼容，得配 fallback
background-color 和 background 的优先级关系
background-color 是 background 复合属性的子项，一旦你用 background: url(...) no-repeat; 这类简写，就会把之前单独设的 background-color 覆盖掉（重置为 transparent）。
典型翻车场景：先写了 div { background-color: #eee; }，后面又在媒体查询里加了 div { background: linear-gradient(...); }——结果灰色没了，因为 background 简写清空了颜色。
立即学习“前端免费学习笔记（深入）”；
透明背景与父容器颜色透出的逻辑
background-color: transparent 不是“没设置”，而是明确设为透明——此时你会看到父元素的背景（颜色、图片、渐变）透上来。这和没写 background-color 效果一样，但语义不同。
容易混淆的是：当父元素用了 rgba()，子元素即使设了 background-color: white，也可能因父层半透而显得发灰。这不是子元素的问题，是层叠上下文+透明度叠加的结果。
移动端 Safari 和旧版 Android 的兼容细节
绝大多数现代浏览器对 background-color 支持毫无压力，但两个老问题还偶有露头：
真正麻烦的不是怎么写，而是忘了检查「这个背景到底属于谁」——DOM 层级、堆叠上下文、是否被 overflow: hidden 截断，这些都比颜色值本身更容易导致预期外的空白。
