CSS3 White to Transparent Gradient

问题

I'm using CSS3 and RGBA to create a white-to-transparent gradient:

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 here: http://jsfiddle.net/alecrust/fYz45/

However as you'll notice, the gradient is dark in the middle. I'm getting this:

And I'm expecting this:

How can I rectify?

回答1:

Change your final step to #FFFFFF00 (rgba(255, 255, 255, 0)) instead of #00000000:

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

回答2:

The final color should be white, transparent, and not black transparent

instead of

rgba(0, 0, 0, 0)

end in

rgba (255, 255, 255, 0)

回答3:

If anyone else if having trouble with gradients or getting a certain aspect (angles, transparency, etc.) I recommend trying this tool to learn more: http://www.colorzilla.com/gradient-editor/ The code below is a sample of what it can do. Transparency is controlled by the top squares, color on the lowers. It allows you to keep dropping more colors in. It has good backwards comparability as well and also some has 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;
}`

回答4:

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

来源：https://stackoverflow.com/questions/15647305/css3-white-to-transparent-gradient