CSS：背景颜色的背景图像

Question

如果正在选择此面板（单击它），我有一个面板，我将其涂成蓝色。此外，我在该面板上添加了一个小符号（ .png image），表示所选面板之前已被选中。

因此，如果用户看到例如 10 个面板，其中 4 个有这个小标志，他就知道他之前已经点击过这些面板。到目前为止，这项工作很好。现在的问题是我无法同时显示小标志并使面板变为蓝色。

我使用 css background: #6DB3F2; 将面板设置为蓝色，背景图像使用 background-image: url('images/checked.png') 。但似乎背景颜色在图像上方，因此您看不到标志。

因此是否可以为背景颜色和背景图像设置 z-index es？

原文由 mkn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要为每个使用完整的属性名称：

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

或者，您可以使用背景速记并将其全部指定在一行中：

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

原文由 dodger 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对我来说，这个解决方案没有成功：

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

但相反，它以另一种方式起作用：

 <div class="block">
<span>
...
</span>
</div>

CSS：

 .block{
  background-image: url('img.jpg') no-repeat;
  position: relative;
}

.block::before{
  background-color: rgba(0, 0, 0, 0.37);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

原文由 Francisc Aknai 发布，翻译遵循 CC BY-SA 3.0 许可协议