我有一个面板，如果这个面板被选中(点击它)，我把它涂成蓝色。此外，我还向该面板添加了一个小符号(.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);
}
其他回答
很有趣的问题，还没见过。这段代码对我来说工作得很好。在chrome和IE9上进行了测试
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
下面是我如何用背景中的图标来设计我的彩色按钮
我用“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-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: #6DB3F2;
background-image: url('images/checked.png');
或者，你可以使用后台简写，并在一行中指定:
background: url('images/checked.png'), #6DB3F2;
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
