배경 이미지 위에 배경 이미지

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; 

를 다음과 같이 내 코드는 내가 이

이 문제를 해결하는 데 도움이 바랍니다 faq_list_bg.png 의 디스플레이 상단을 expand_new1.png 표시 할 수 있습니다.

expand_new1.png 이미지가 흰색이고 faq_list_bg.png 이미지가 파란색입니다. 그것은 첫 번째 이미지를 완전히 숨 깁니다.

[1]

Answer 1

NEW 정보에 근거한

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

편집 삭제 [[내가 화이트 색상 플러스 아이콘 더하기 아이콘을 교체 할 때 다음 이미지] [1] 사라!] :

을

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

당신이에 +를 변경하지 않으려면 - 또는 한 번에 모두 함께 아무것도 확장 : 당신이 z-index 속성을 사용하지만 position 값을 설정하지 않았기 때문에

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

그것은 첫 번째 이미지를 숨 깁니다. 그것은 단지 그 position 재산 명시 적으로 absolute, fixed, 또는 relative로 설정되어 요소에서 작동하기 때문에

z-index가 작동하지 않습니다.

두 경우 모두 position을 absolute으로 설정하십시오.