幻灯片背景颜色转换

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上工作得很好。