background-color不生效的主因是层叠覆盖或元素无尺寸；需检查开发者工具中是否被划掉、确认有border可见、排除transparent/RGBA(0)等透明值，并注意多背景堆叠规则。
background-color 设置后不生效？先看层叠顺序和透明度
最常见的不是写错属性，而是被更高优先级的样式覆盖，或者元素本身没尺寸。比如 div 里没内容、没设置 height 或 padding，它实际高度为 0，背景自然看不见。
- 检查是否被其他 CSS 规则覆盖：用浏览器开发者工具看
background-color是否被划掉，重点盯!important、内联样式、ID 选择器 - 确认元素有渲染面积：给元素加
border: 1px solid red，看看框有没有出来 -
background-color: transparent是默认值，别误以为是“没写”，它真会覆盖父级背景 - RGBA 值里 alpha 为 0（如
rgba(0,0,0,0)）等于透明，不是“黑色变没了”，是彻底没颜色
颜色值怎么选？十六进制、rgb()、关键字的实际差异
三种写法都能用，但行为有细微差别：十六进制和关键字是完全不透明的；rgb() 和 hsl() 支持第四个参数 alpha，而 rgba() 是独立函数——别混用 rgb(0,0,0,0.5)，这是无效语法，必须写成 rgba(0,0,0,0.5)。
- 十六进制推荐用 6 位（
#ff6b6b），3 位（#f6b）容易误读，且不支持 alpha - 用
hsl()调色更直观，比如hsl(200, 100%, 50%)比记#00aaff更容易调整明暗 - 关键字如
rebeccapurple虽有趣，但兼容性没问题，不过团队协作时不如十六进制明确 - 避免用
inherit除非真要继承父级背景色——它继承的是计算后的颜色值，不是“让背景透出来”
背景色和 background-image 同时存在时谁在上面？
background-color 永远在最底层，background-image 盖在它上面。如果图片是 PNG 且有透明区域，底下颜色才会透出来；如果图片铺满无透明，背景色就完全看不见。
- 想让图片半透明叠加，不要调
background-color的 alpha，而是给background-image加opacity（不行，opacity 会影响整个元素）——正确做法是用background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(...) - 多背景时，逗号分隔的列表从左到右由上到下堆叠，
background-color不参与这个列表，它只是底层垫色 - 用
background: #fff url(...) no-repeat;会覆盖掉所有其他 background 属性，包括之前设的background-color——这是重置式写法，慎用
在 CSS 变量或 JS 动态改背景色时要注意什么？
变量本身不触发重绘，但赋值时若用错格式，JS 设置会静默失败。比如 element.style.backgroundColor = 'hsl(240, 100%, 50%)' 没问题，但 element.style.backgroundColor = 'hsla(240, 100%, 50%, 0.8)' 在旧版 Safari 可能不认。
立即学习“前端免费学习笔记（深入）”；
- CSS 变量里存颜色值，记得带引号：
--main-bg: "#3498db";，否则background-color: var(--main-bg)会被当成无效值 - JS 中修改前先确认元素存在，
document.querySelector('.btn')?.style.backgroundColor = '#e74c3c'比直接链式调用安全 - 动画场景下，纯
background-color是可硬件加速的，但和transform一起用时，别把颜色变化塞进同一个transition，否则可能触发不必要的重排
真正卡住人的往往不是不会写 background-color，而是它被别的规则压住了、元素没尺寸、或者和图片/渐变混用时没理清堆叠逻辑。调不出来时，先打开开发者工具，盯着 computed 栏里那个最终生效的颜色值看——它不会说谎。
