CSS3 Weiß auf Transparent Gradient

Question

Ich CSS3 und RGBA mit einer weiß-to-transparenten Gradienten zu erzeugen:

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

Fiddle hier: http://jsfiddle.net/alecrust/fYz45/

jedoch, wie Sie werden bemerken, der Gradient dunkel in der Mitte. Ich erhalte diese:

Und ich erwarte dies:

Wie kann ich korrigieren?

Answer 1

Ihren letzten Schritt zu #FFFFFF00 ändern (rgba(255, 255, 255, 0)) statt #00000000:

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

Answer 2

Die endgültige Farbe sollte weiß, transparent sein, und nicht schwarz transparent

statt

rgba(0, 0, 0, 0) 

Ende 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

Wenn jemand anderes, wenn mit Steigungen Probleme haben oder einen bestimmten Aspekt bekommen (Winkel, Transparenz, etc.) Ich empfehle dieses Tool versucht, mehr zu erfahren: http://www.colorzilla.com/gradient-editor/ Der Code unten eine Probe von dem, was sie kann machen. Die Transparenz wird durch die oberen Quadrate, die Farbe auf den Unterseiten gesteuert. Es erlaubt Ihnen, immer mehr Farben einzufügen. Es hat auch eine gute Rückwärtsvergleichbarkeit und einige Presets.

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