背景颜色，background-color，早期常用来预防图片失效时元素上的文本仍然可以清晰显示，一般这么设置：

这要求背景颜色与背景图像的总体色系相一致或相近。上述写法是background-*的简写，颜色代码和图像代码之间用一个空格隔开，颜色在前图像在后的写法也只能使用空格隔开。颜色代码也可以写在图像代码的后面，二者间用空格或小角逗号隔开（建议后者，便于区分）。如下两种写法都是合法有效的：

作为背景样式的构造参与者之一，背景颜色（分开写时是background-color）可以视为是背景构成的图层之一，它的作用不仅在背景图像失效时提供一个相对友好的阅读环境，还能参与到背景图像的融合（background-blend-mode）效果中来。以下演示，在启用背景图像融合滤镜前，背景图像是它原始的样子，并不受到元素的背景颜色的影响：

启用 background-blend-mode 为 multiply

我个人坚持认为：背景颜色在使用背景图像融合技术时会作用于整体融合效果，但融合技术并不能直接作用于背景颜色，换言之，我们假若尝试使用 background-blend-mode 来修改背景颜色本体，那是不现实的，尽管有CSS大佬认为可以；上述演示，在我们通过点击按钮来手工启用了 multiply 融合滤镜之后，左边不被图像覆盖的区域仍然保持其原始状态（#333）——或许有人觉得确实有变化，那么，请使用拾色器检查一下左边区域的颜色是否存在变化。可以这么理解：融合技术总体上是直接作用于图像而非背景颜色，但一旦使用了背景融合技术，由于图像会因在复杂的算法中有部分像素变成一定程度的透明，元素的背景颜色就能从图像图层之下溢出，以此方式参与到融合技术所产生的效果。因此我赞同背景颜色+背景图像也属于元素的多背景图像的说法，尤其是在启用了背景融合技术之时。

地道的多重背景则应是元素的背景使用了多个图像，图像包含实质意义上的诸如 .png、.jpg、.jpeg、.webp 之类的图片，以及渐变背景 *-gradient。以下示例，使用了上述背景颜色+背景图片，在此基础上再加入一个 radial-gradient 径向渐变背景。看效果和代码：

只使用 overlay 融合滤镜

特别注意上面的background简写属性中，背景颜色 #333 是写在最后的，若写在前面，背景颜色在融合效果中不能发挥作用。此外，融合滤镜我们使用了两个，正片叠加（overlay）和滤色（screen），其中，滤色作用于 radial-gradient 渐变，将其内的颜色成分中的黑色 black 去掉，所以融合的效果特别明亮。可以点击示范下的按钮，将滤色 screen 滤镜去掉，也就是说，两个图像都是用正片叠加，看看效果是不是暗淡许多，如果是，那么，是径向渐变中 black 颜色的作用——它没有被滤掉，仅是因叠加融合而改变了色彩状态。

小结：本节主要探讨多重背景图像设置中背景颜色的参与细节，这是一个相对抽象的问题，并且，由于理解能力所限，一些解释不能保证十分准确，抑或存在理解上的错误亦未可知。