CSS3ホワイト

Question

私は白のツー透明グラデーションを作成するにはCSS3やRGBAを使用しています：ここ

div { 
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0))); 
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(0, 0, 0, 0)', GradientType=1); 
    padding: 2rem 0; 
} 

フィドル：http://jsfiddle.net/alecrust/fYz45/

をただし、あなたが気づくように、勾配があります真ん中に暗い。私は、この取得しています：

をそして私は、これは期待してい：

どのように是正することができますか？

Answer 1

は #00000000の代わり #FFFFFF00（ rgba(255, 255, 255, 0)）への最終ステップを変更

：

http://jsfiddle.net/fYz45/6/

Answer 2

最終的な色は、白、透明、透明な黒

代わりに

rgba(0, 0, 0, 0) 

ないでなければなりません

end in

私はより多くを学ぶために、このツールを試してみることをお勧め

rgba (255, 255, 255, 0) 

Answer 3

div{ 
    background-color:#ffffff; 
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#ffffff,  endColorstr=#ffff01); 
    background-image:-moz-linear-gradient(left top, #ffffff 0%, #ffff01 100%); 
    background-image:-webkit-linear-gradient(left top, #ffffff 0%, #ffff01 100%); 
    background-image:-ms-linear-gradient(left top, #ffffff 0%, #ffff01 100%); 
    background-image:linear-gradient(left top, #ffffff 0%, #ffff01 100%); 
    background-image:-o-linear-gradient(left top, #ffffff 0%, #ffff01 100%); 
    background-image:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff),  color-stop(100%,#ffff01)); 
} 

Answer 4

誰がグラデーションに問題があるか、特定の側面（角度、透明度など）を取得した場合の場合：http://www.colorzilla.com/gradient-editor/以下のコードは何ができるのサンプルです行う。透明度は、上の四角形で制御され、下に色付けされます。それはあなたがより多くの色を落とし続けることを可能にします。それは良い後方比較もあり、またいくつかはプリセットを持っています。

`div { 
 
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* FF3.6-15 */ 
 
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffff3a',GradientType=1); /* IE6-9 */ 
 
background-repeat: repeat-x; 
 
padding: 2rem 0; 
 
}`