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

如果你想要将+更改为a - 或者在扩展后将其全部改为：

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

Answer 2

它隐藏了第一张图片，因为您使用了z-index属性但未设置position值。

z-index无效，因为它只适用于position属性已明确设置为absolute，fixed或relative的元素。

在您的情况下，将position设置为absolute。

在背景图象的背景图象

2 个答案: