我有一个面板，如果这个面板被选中(点击它)，我把它涂成蓝色。此外，我还向该面板添加了一个小符号(.png图像)，表示所选面板以前已经被选中过。
例如，如果用户看到10个面板，其中4个有这个小标志，他就知道他之前已经点击过这些面板。到目前为止，这工作得很好。现在的问题是，我不能同时显示小标志和使面板蓝色。
我将面板设置为蓝色，css背景:#6DB3F2;背景图片加上background-image: url('images/checked.png')。但是背景颜色似乎在图片上方，所以你看不到这个标志。
因此，是否可以为背景颜色和背景图像设置z-index ?
当前回答
这对我来说很管用:
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');
}
其他回答
你也可以用一个小技巧来使用图像和颜色，就像这样
body {
background:#000 url('images/checked.png');
}
也可以使用下一个语法。
background: <background-color>
url('../assets/icons/my-icon.svg')
<background-position-x background-position-y>
<background-repeat>;
它允许你组合背景-颜色，背景-图像，背景-位置和背景-重复属性。
例子
background: #696969 url('../assets/icons/my-icon.svg') center center no-repeat;
< style=“background-color： #ffffff;”><a href=“/<%=logo_marka_url%>”><img border=“0” style=“border-radius：5px;background：url（images/picture.jpg'） 50% 50% 无重复;宽度：150px;高度：80px;” src=“images/clearpixel.gif”/></a></li>
其他样本盒中心图像和背景颜色
1.首先清除像素固定图像区域 2.样式中心图像区域框 3.李背景或div色彩风格
如果你想在背景中生成一个黑影，你可以使用 以下几点:
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
