我有一个面板，如果这个面板被选中(点击它)，我把它涂成蓝色。此外，我还向该面板添加了一个小符号(.png图像)，表示所选面板以前已经被选中过。
例如，如果用户看到10个面板，其中4个有这个小标志，他就知道他之前已经点击过这些面板。到目前为止，这工作得很好。现在的问题是，我不能同时显示小标志和使面板蓝色。
我将面板设置为蓝色，css背景:#6DB3F2;背景图片加上background-image: url('images/checked.png')。但是背景颜色似乎在图片上方，所以你看不到这个标志。
因此，是否可以为背景颜色和背景图像设置z-index ?
当前回答
下面是我如何用背景中的图标来设计我的彩色按钮
我用“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>
其他回答
如果你想在背景中生成一个黑影，你可以使用 以下几点:
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
对我来说，这个解决方案并不奏效:
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%;
}
假设你想要一个图标在右边(或左边)，那么这应该是最好的工作:
.show-hide-button::after {
content:"";
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-size: 1em;
width: 1em;
height: 1em;
background-position: 0 2px;
margin-left: .5em;
}
.show-hide-button.shown::after {
background-image: url(img/eye.svg);
}
您也可以使用background-size: contains;，但这应该是基本相同的。背景位置将取决于你的图像。
然后你可以很容易地在hover上做一个替代状态:
.show-hide-button.shown:hover::after {
background-image: url(img/eye-no.svg);
}
也可以使用下一个语法。
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;
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
