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

将最后一步更改为#FFFFFF00（rgba(255, 255, 255, 0)）而不是#00000000：

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

Answer 2

最终颜色应该是白色，透明，而不是黑色透明

而不是

rgba(0, 0, 0, 0)

结束

rgba (255, 255, 255, 0)

Answer 3

如果其他人如果遇到渐变或获得某个方面（角度，透明度等）的问题，我建议您尝试使用此工具了解更多信息：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;
}`

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