幻燈片背景顏色轉換

Question

我發現這個例子從一個線程在這裏在stackoverflow。

<a href="#">aosgibmoa bnocibnas</a> 

a{ 
display:inline-block; 
background:#fff; 
position:relative; 
padding:2px 5px; 

background:-webkit-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000)); 
background-size:200% 100%; 
background-position:0 0; 
-webkit-transition:background-position .3s ease-out; 
} 

a:hover{ 
    background-position:100% 0; 
} 

http://jsfiddle.net/nsfxE/1/

但我不知道如何將-webkit-梯度切換到其他供應商名稱和正常的標準之一。

我想確保它具有一定的現代化跨瀏覽器兼容性。

Answer 1

background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000)); 
background-image: -moz-linear-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000)); 
background-image: -o-linear-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000)); 
background-image: linear-gradient(linear, left top, right top, color-stop(0.5, #fff), color-stop(0.5, #000)); 

我希望這是你想要的。

Answer 2

嗯，我試過了，這是我的答案。希望這可以作爲任何人需要的參考。

a{ 
display:inline-block; 
background:#fff; 
position:relative; 
padding:2px 5px; 
background:-webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #000)); 
background:-webkit-linear-gradient(left, #fff 50%, #000 50%); 
background:-moz-linear-gradient(left, #fff 50%, #000 50%); 
background:linear-gradient(to right, #fff 50%, #000 50%); 

background-size:200% 100%; 
background-position:0 0; 
-webkit-transition:background-position .3s ease-out; 
-moz-transition:background-position .3s ease-out; 
transition:background-position .3s ease-out; 
} 

a:hover{ 
    background-position:-100% 0; 
} 

http://jsfiddle.net/nsfxE/215/

現在應該在最現代的瀏覽器。 我從來沒有把歌詞的前綴，因爲我試過，它不工作。標準語法在Opera上工作得很好。