我有一个面板,如果这个面板被选中(点击它),我把它涂成蓝色。此外,我还向该面板添加了一个小符号(.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);
}

其他回答

假设你想要一个图标在右边(或左边),那么这应该是最好的工作:

.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);
}

< 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:#000 url('images/checked.png');
 }

你可以尝试用框影:inset

.second_info_block {
  background: url('imageURL');
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}