배경 이미지의 투명도가 페이드 인 전환

Question

내 웹 사이트의 헤더에 투명 효과의 페이드 효과를 추가하려고합니다. 바로 그 효과가 거꾸로됩니다. 내가 어떻게 그걸 뒤집을 수 있니?

Jsfiddle Link

또한, 투명 효과는 이미지가 아닌 텍스트에 있어야합니다.

이 내 코드는 바로 지금입니다 :

이

#header ul li a:hover{ 
    color:#FF4242; 
    background: url(http://i.imgur.com/CJub1gt.png?1?7924) no-repeat 0 0; 
    -webkit-transition: opacity 0.5s ease-out; 
    -moz-transition: opacity 0.5s ease-out; 
    -o-transition: opacity 0.5s ease-out; 
    transition: opacity 0.5s ease-out; 
    opacity: 0.5; 
} 

Answer 1

당신은 리튬 요소에 별도의 사업부를 추가 할 수 있으며 애니메이션을 배경으로 사용 #을 제거 (http://jsfiddle.net/qoc6bbnm/3/

<li><a href="">Home</a><div class="back"></div></li> 

새 CSS 값 헤더 ul li 및 #header ul li : 마우스 오버)

#header ul li a:hover{ 
    color:#FF4242; 
} 

#header ul li { 
    position:relative; 
} 

#header ul li div.back{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    z-index:-1; 
    color:#FF4242; 
    background: url(http://i.imgur.com/CJub1gt.png?1?7924) no-repeat 0 0; 
    -webkit-transition: opacity 0.5s ease-out; 
    -moz-transition: opacity 0.5s ease-out; 
    -o-transition: opacity 0.5s ease-out; 
    transition: opacity 0.5s ease-out; 
    opacity: 0 
} 

#header ul li:hover div.back{ 
    opacity:1; 
}