透明度淡入背景圖片轉換

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

您可以添加額外的div來li元素和背景動畫使用：http://jsfiddle.net/qoc6bbnm/3/

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

新的CSS值（除去＃ header ul li a and #header ul li a：hover）

#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; 
}