CSS：背景色和图像，为什么？

我在下面遇到了类似的事情。为什么不直接使用图像呢？什么时候我们需要两者都使用

background: #6DB3F2 url('images/checked.png')

---

谢谢。

如果图像具有透明度，您可能希望显示其背后的颜色。图像可能仅覆盖容器背景的一部分，而您可能希望容器的其余部分具有背景色。这些可能是主要原因。

实际上，您只能使用图像

试一试

但是，当图像仍在加载/渲染时，最好先显示背景色

所以使用

background: #6DB3F2 url('images/checked.png');

---

有时，如果图像很小且不重复或有透明区域，我们需要给背景上色

背景图像不必与元素大小相同，因此颜色将填充元素的其他部分

背景图像可以是透明的，可以用颜色填充透明部分

---

我认为其他任何答案都没有涵盖所有（实际）原因，因此：

如果背景图像有透明部分，则会显示背景色

如果背景图像小于文档（例如，仅用作标题图像），则背景颜色将覆盖文档的其余部分

如果无法加载背景图像（例如主机、404或政府黑名单*cough*中国*cough*上的服务器错误）

有点像#3的衍生物，背景颜色将在加载背景图像时显示。如果将背景色设置为与图像的背景色相同（或类似），则加载图像时颜色不会突然变化

background: #6DB3F2 url('images/checked.png');