我有一个面板，如果这个面板被选中(点击它)，我把它涂成蓝色。此外，我还向该面板添加了一个小符号(.png图像)，表示所选面板以前已经被选中过。
例如，如果用户看到10个面板，其中4个有这个小标志，他就知道他之前已经点击过这些面板。到目前为止，这工作得很好。现在的问题是，我不能同时显示小标志和使面板蓝色。
我将面板设置为蓝色，css背景:#6DB3F2;背景图片加上background-image: url('images/checked.png')。但是背景颜色似乎在图片上方，所以你看不到这个标志。
因此，是否可以为背景颜色和背景图像设置z-index ?
当前回答
你可以尝试用框影:inset
.second_info_block {
background: url('imageURL');
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}
其他回答
如果你想在背景中生成一个黑影，你可以使用 以下几点:
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
你可以尝试用框影:inset
.second_info_block {
background: url('imageURL');
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}
对我来说，这个解决方案并不奏效:
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 Docs中，你可以使用简写的background属性设置多个背景，也可以设置除了background-color之外的单个属性。在你的例子中，你可以像这样使用线性梯度:
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;
分别设置各个属性参数。因为图像被放在颜色叠加的下面，它的属性参数也被放在颜色叠加参数之后。
你需要使用完整的属性名:
background-color: #6DB3F2;
background-image: url('images/checked.png');
或者，你可以使用后台简写，并在一行中指定:
background: url('images/checked.png'), #6DB3F2;
