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

繼承人視覺：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; 
}

來源

2012-07-30 Joe Bobby

我不認爲你可以添加到背景圖像的過渡。我建議你使用'opacity（）'屬性。 – Saurabh 2012-07-30 15:20:00

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

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

來源

2012-07-30 15:26:28 chris

我正在改變圖像的顏色和鏈接，而不是僅僅改變不透明度。那麼最好的解決方案是什麼？ – 2012-07-30 15:30:29

我沒有注意到，對不起。如果你問我認爲你是什麼，那麼沒有改變形象。一個形象就像實體一樣，它就是這樣。你可以創建改變圖像背景的錯覺，儘管在幾個方面。你可以創建一個精靈，你可以在像manor這樣的翻滾中使用，或者你製作一個透明背景的圖像，它的in的背景顏色是圖像的顏色。或者您可以在元素內創建圖層以實現最終目標。如果所有你想要的是背景雖然Id建議透明圖像 – chris 2012-07-30 15:34:46

其中元素的背景是任何你想要的顏色，然後改變它在飛行 – chris 2012-07-30 15:35:04

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

回答

相關問題