爲什麼文字會褪色但不是圖像？

Question

繼承人視覺：http://cl.ly/image/2L3g1d0W1r1Y

文字淡出正常，但左側的圖像是即時的，不褪色的廣告，同時爲文本。我如何讓它們在所有瀏覽器的同時淡入？它似乎在Chrome中運行良好，但在Firefox或Safari中無法運行。

我對怎麼回事有點困惑，但是我的繼承人HTML：

<ul class="action"> 
    <li><a class="visit-site" href="http://google.com">Visit Site</a></li> 
    <li><a class="back-to-top" href="#portfolio">Back to top</a></li> 
</ul> 

這裏是CSS：

ul.action a.visit-site { 
background: transparent url('../images/arrow-small-right-rest.png') no-repeat 0 2px; 
padding-left: 18px; 
color: #57585a; 
-webkit-transition: 0.5s all ease; 
-moz-transition: 0.5s all ease; 
transition: 0.5s all ease; 
-o-transition-duration: 0.5s all ease; 
} 

ul.action a.visit-site:hover { 
background: transparent url('../images/arrow-small-right-over.png') no-repeat 0 2px; 
color: #3ee1df; 
} 

雪碧：

ul.action a.back-to-top{ 
background: transparent url('../images/sprite.png') no-repeat 0 2px; 
padding-left: 18px; 
width: 13px; 
height: 13px; 
color: #57585a; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
-webkit-transition: all 0.5s ease; 
-ms-transition: all 0.5s ease; 
transition: all 0.5s ease; 
} 

ul.action a.back-to-top:hover{ 
background-position: 0 -63px; 
color: #3ee1df; 
} 

Answer 1

如果您在整體設計和開發中使用jQuery之類的東西，您可以「動畫化」整個UL元素的「不透明度」大街，這應該創造你想要的過渡。

但所有瀏覽器都不支持不透明度，所以較舊的不透明度。有跨瀏覽器的解決方案，但在所有你想調整不透明度，以創建透明效果