能起作用，但仅在 background-image 有透明区域或未铺满时才可见；background-color 永远位于最底层，其可见性取决于上层渐变是否“透光”，而非声明顺序。
background-color 被 background-image 完全盖住，还能起作用吗
能起作用，但仅在 background-image 有透明区域或未铺满时才可见。CSS 中 background-color 是最底层的背景“垫底色”，而 background-image 默认绘制在其上方——无论声明顺序如何，background-color 永远在最下，background-image（含渐变）永远在上。所谓“顺序影响覆盖”是误解，真正起作用的是层叠逻辑，不是 CSS 声明顺序。
用 linear-gradient 时 background-color 看不见的常见原因
多数人写渐变时没留透明/半透明空间，导致 background-color 完全不可见。关键不在写法顺序，而在渐变本身是否“透光”：
-
linear-gradient(to right, #ff0000, #00ff00)：不透明纯色渐变，background-color完全被遮挡 -
linear-gradient(to right, rgba(255,0,0,0.5), rgba(0,255,0,0.5))：带 alpha 的渐变，底层background-color会从半透明区域透出 -
linear-gradient(to right, #ff0000, transparent 50%, #00ff00)：显式插入transparent色标，中间留空，background-color在该区域可见
想让 background-color 和渐变同时生效的正确写法
唯一可靠方式是把两者合并进单个 background 声明，利用逗号分隔的多层背景语法。浏览器按从后到前渲染（即最后写的在最下），所以要把 background-color 放在渐变之后：
div {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4), #fff;
}
注意：#fff 是颜色值，不是 background-color: #fff；它作为第二层（底层）参与渲染。等价于：
div {
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background-color: #fff;
}
但单独写这两行时，background-color 仍有效——只是被不透明渐变完全盖住，视觉上不可见。
兼容性与性能提醒
多层背景（如 background: gradient, color）在 IE10+、Edge 12+、所有现代浏览器中均支持，无需前缀。但要注意：
- 渐变层若含大量高斯模糊或复杂滤镜，叠加
background-color不会增加绘制开销，但可能影响复合层判断，引发意外重绘 - 移动端 Safari 对
transparent在渐变中的解析较严格，建议用rgba(0,0,0,0)替代关键词 - 如果目标是“渐变边缘柔和过渡到背景色”，别依赖
background-color垫底，直接用渐变自身收尾：例如linear-gradient(to right, #ff0000, #ff0000 70%, #fff 70%, #fff)
真正容易被忽略的点是：很多人调了半天声明顺序，却没检查渐变里有没有哪怕一个 transparent 或低 alpha 值——那才是决定 background-color 能否露脸的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
