background-color不生效最常见原因是颜色值格式错误、background复合属性覆盖、内联元素盒模型限制及父容器overflow裁剪。
background-color 值写错导致颜色不生效
最常见的情况是把颜色值写成无效格式，比如漏掉 #、用错引号、拼错关键字。浏览器会直接忽略整个声明，背景还是透明或继承父级。
-
background-color: #ff0000✅（十六进制，必须带#） -
background-color: red✅（命名色，大小写不敏感） -
background-color: rgb(255, 0, 0)✅（函数调用，括号和逗号不能少） -
background-color: ff0000❌（缺#，被当成无效标识符） -
background-color: "red"❌（加了引号，css 不认字符串字面量）
background-color 和 background 混用时被覆盖
background 是复合属性，只要它出现在 background-color 后面，就会重置所有背景相关值（包括颜色），哪怕你只写了 background: url(...)。
- 顺序很重要：先写
background-color，再写background，后者会清空前者 - 想同时设颜色和图片，用
background: #eee url(img.png) no-repeat;，别拆开 - 调试时检查 computed styles，看最终生效的是哪条规则，常发现
background覆盖了background-color
transparent 和 rgba(0,0,0,0) 的行为差异
两者都“看起来透明”，但语义和渲染表现不同：transparent 是明确的关键字，表示完全透明且无颜色信息；rgba(0,0,0,0) 是有颜色通道的透明黑，在某些旧浏览器或混合模式下可能触发意外合成。
- 纯透明需求，优先用
background-color: transparent - 需要渐变透明或动画过渡时，才用
rgba()或hsla()，因为transparent无法参与颜色插值 - IE8 及更早版本不支持
rgba()，但支持transparent
background-color 在内联元素上没效果
默认情况下，background-color 对 <span></span>、<a></a> 这类内联元素只作用于文字包围区域，不会撑开背景——因为内联元素的盒模型高度由行高和字体决定，不是由内容块决定。
立即学习“前端免费学习笔记（深入）”；
- 加
display: inline-block或display: inline-flex让它能接受宽高与背景 - 或者用
padding手动扩大可渲染区域，但要注意会影响行高对齐 - 不要指望给纯文本
<span></span>设置height来撑背景，内联元素无视height
真正容易被忽略的是层叠上下文和父容器的 overflow 设置——如果父元素设置了 overflow: hidden，而子元素的 background-color 区域刚好超出边界，颜色就切掉了，不是没生效，是被裁了。