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

Question

我在下面发现了类似的内容。为什么不使用图像？我们什么时候需要同时使用它们？

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

感谢。

Answer 1

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

1. 如果背景图片具有透明部分，则会显示背景颜色。

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

3. 如果无法加载背景图片（例如主机上的服务器错误，404或政府黑名单*咳嗽*中国*咳嗽*）

4. 将衍生物排序为＃3，背景颜色将在背景图像加载时显示。如果将背景颜色设置为与图像颜色相同（或类似），则图像加载时颜色不会突然改变。

Answer 2

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

Answer 3

实际上你只能使用图像。

尝试

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

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

所以使用

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

Answer 4

如果图像很小而且没有重复或有透明区域，我们有时需要为背景着色

Answer 5

1. 背景图片不必与元素的大小相同，因此颜色将填充元素的其他部分。
2. 背景图片可以是透明的，您可以使用颜色填充透明部分。