html - 背景图像覆盖背景图像

Question

我正在尝试将背景图像覆盖在背景图像上，但它隐藏了第一张图像。我的代码如下

<li class="collapsed">
<a>Getting Started</a>
</li>


.collapsed {
background-image: url(../images/expand_new1.png)!important;
background-repeat: no-repeat;
background-position: 141px 5px;
background-size: 35px;
-moz-background-size: 30%;
-webkit-background-size: 30%;
z-index:50;

li.collapsed  a{

opacity: 0.8;
background-image: url(../images/assets/faq/faq_list_bg.png);
display:block;
padding-left:27%;
font-family:  'Roboto';
font-size: 20px;
font-weight: 300;
color: #fff;
z-index:-1;

我想显示 expand_new1.png 显示 faq_list_bg.png 的顶部

请帮助解决这个问题。

expand_new1.png 图像为白色，faq_list_bg.png 图像为蓝色。它完全隐藏了第一张图片。

[![当我用白色加号图标替换加号图标时图像消失][1]][1]

Answer 1

移除

background-image: url(../images/assets/faq/faq_list_bg.png);

根据新信息进行编辑:

li.collapsed  a:after {
background-image: url('../images/expand_new1.png');
background-size: 20px 20px;
display: inline-block;
width: 20px;
height: 20px;
content: "";
}

http://puu.sh/pBTSS/ffc491e491.png

如果您想在展开后将 + 更改为 - 或什么都不更改:

li.collapsed.expanded  a:after {
background-image: url('NEW IMAGE LINK HERE');
background-size: 20px 20px;
display: inline-block;
width: 20px;
height: 20px;
content: "";
}