CSS:背景颜色上的背景图像
我有面板，我把它涂成蓝色，如果这个面板被选中(点击它)。此外，我还向该面板添加了一个小符号(.png图像)，表示选定的面板以前已被选中。
因此，如果用户看到例如10个面板，其中4个面板上有这个小标志，他就知道他以前已经点击过这些面板。到目前为止，这项工作一切正常。现在的问题是，我不能在显示小标志的同时使面板变为蓝色。
我使用css background: #6DB3F2;将面板设置为蓝色，并使用background-image: url('images/checked.png')设置背景图像。但是背景颜色似乎在图像的上方，所以你看不到标志。
因此可以为背景颜色和背景图像设置z-indexes吗？
回答 12
Stack Overflow用户
发布于 2011-11-20 00:05:38
您需要对每个属性使用完整的属性名称：
background-color: #6DB3F2;
background-image: url('images/checked.png');或者，您可以使用背景速记并在一行中指定所有内容：
background: url('images/checked.png'), #6DB3F2;Stack Overflow用户
发布于 2014-07-25 05:57:01
对我来说，这个解决方案没有奏效：
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%;
}Stack Overflow用户
发布于 2017-12-25 05:16:43
基于MDN Web Docs，您可以使用速记background属性或单个属性( background-color除外)设置多个背景。在您的例子中，您可以像这样使用linear-gradient实现一个技巧：
background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);参数中的第一项(图像)将放在顶部。第二项(彩色背景)将放在第一项的下面。您还可以单独设置其他属性。例如，设置图像的大小和位置。
background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;这种方法的好处是你可以很容易地在其他情况下实现它，例如，你想让蓝色覆盖在具有一定不透明度的图像上。
background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;单独的属性参数分别设置。因为图像被放在颜色覆盖下，所以它的属性参数也被放置在颜色覆盖参数之后。
https://stackoverflow.com/questions/8195215
复制相似问题