background-color可设颜色名、十六进制、RGB、HSL及transparent；无效常见因元素无尺寸、overflow隐藏裁剪或优先级被覆盖；background简写会重置颜色为transparent；rgba/hsla影响内容透明度，需伪元素隔离。
background-color 能设哪些值
直接写颜色名（比如 red、transparent）最简单，但可选名字少且不精确；更常用的是十六进制（#ff6b35）、RGB（rgb(255, 107, 53)）或 HSL（hsl(14, 100%, 60%)）。注意 transparent 是合法值，不是空字符串或 none —— 后两者会触发浏览器回退到默认背景（通常是白色）。
background-color 不生效的常见原因
最常踩的坑是元素没尺寸：如果 div 没内容、没高度、没 padding 或 min-height，它实际高度为 0，背景色自然看不见。另外，父容器设置了 overflow: hidden 且子元素用负 margin 拉伸背景时，也可能裁掉颜色区域。还有就是 CSS 优先级问题——检查是否被更具体的规则（比如带 !important 的类）覆盖了。
和 background 简写属性混用时的陷阱
background-color 单独设置是安全的，但一旦用了 background 简写（比如 background: url(img.png) no-repeat;），就会把原有 background-color 值重置为 transparent，哪怕你没提颜色。所以如果既要图片又要背景色，得显式写全：background: #f0f0f0 url(img.png) no-repeat;，或者分开写 background-color 和 background-image。
透明度控制：别只用 rgba()
想让背景半透，用 rgba(0, 0, 0, 0.5) 最直接，但注意它会让整个元素内容（文字、子元素）也继承该透明度；如果只想背景透、内容不透，得用伪元素或额外包裹层。另一个选择是 hsla()，逻辑一致。CSS 自定义属性（--bg: #000;）不能直接加 alpha，得转成 rgba() 或用 color-mix()（新特性，兼容性有限）。
立即学习“前端免费学习笔记（深入）”；
