如果选择了该面板（单击该面板），则该面板的颜色为蓝色。此外，我.png在该面板上添加了一个小标志（图像），这表明所选面板之前已被选中。
因此，如果用户看到例如10个面板，其中有4个带有这个小标记，则他知道自己之前已经单击了这些面板。到目前为止，这项工作还不错。现在的问题是我无法显示小标志并使面板同时变蓝。
我使用css将面板设置为蓝色，使用设置background: #6DB3F2;背景图像background-image: url('images/checked.png')。但是背景色似乎在图像上方，因此您看不到该标志。
因此，可以z-index为背景颜色和背景图像设置es吗？
Answers:
对我来说，这个解决方案是行不通的：
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%;
}根据MDN Web文档，您可以使用简写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;分别设置各个属性参数。由于图像放置在颜色叠加层下面，因此其属性参数也放置在颜色叠加层参数之后。
您也可以使用简单的技巧来同时使用图像和颜色：-
body {
background:#000 url('images/checked.png');
}这实际上对我有用：
background-color: #6DB3F2;
background-image: url('images/checked.png');您还可以放置纯色阴影并设置背景图像：
background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;如果第一个选项由于某种原因不起作用，并且您不想使用框阴影，则可以始终为图像使用伪元素，而无需任何额外的HTML：
.btn{
position: relative;
background-color: #6DB3F2;
}
.btn:before{
content: "";
display: block;
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
background-image: url('images/checked.png');
}这是我在后台用图标设置彩色按钮样式的方式
我将“ background-color”属性用于颜色，将“ background”属性用于图像。
<style>
.btn {
display: inline-block;
line-height: 1em;
padding: .1em .3em .15em 2em
border-radius: .2em;
border: 1px solid #d8d8d8;
background-color: #cccccc;
}
.thumb-up {
background: url('/icons/thumb-up.png') no-repeat 3px center;
}
.thumb-down {
background: url('/icons/thumb-down.png') no-repeat 3px center;
}
</style>
<span class="btn thumb-up">Thumb up</span>
<span class="btn thumb-down">Thumb down</span><li style="background-color: #ffffff;"><a href="https://stackoverflow.com/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>
其他样品盒中心图像和背景色
1.第一个clearpixel固定图像区域2.样式中心图像区域框3.li背景或div颜色样式