슬라이드 배경색 전환

Question

이 예제는 threadoverflow에있는 스레드에서 발견했습니다.

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

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

그러나 나는 다른 벤더 접두사와 일반 표준 하나에 -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

글쎄, 나는 밖으로 시도하고 이것은 내 대답이다. 희망이 누구에게 필요한 참조가되기를 바랍니다.

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

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

이 지금은 가장 현대적인 브라우저에서 작동합니다. 필자는 Opera 접두어를 사용하지 않았기 때문에 접두어를 붙이지 않았습니다. 작동하지 않습니다. 표준 구문은 Opera에서 잘 작동합니다.