CSS CSS3 白色到透明渐变
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15647305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 White to Transparent Gradient
提问by AlecRust
I'm using CSS3 and RGBA to create a white-to-transparent gradient:
我使用 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;
}
Fiddle here: http://jsfiddle.net/alecrust/fYz45/
在这里小提琴：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?
我该如何纠正？
回答by MarcinJuraszek
Change your final step to #FFFFFF00(rgba(255, 255, 255, 0)) instead of #00000000:
将您的最后一步更改为#FFFFFF00( rgba(255, 255, 255, 0)) 而不是#00000000：
回答by vals
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)
回答by Tom
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.
如果其他人在渐变或获得某个方面（角度、透明度等）方面遇到问题，我建议您尝试使用此工具以了解更多信息：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;
}`回答by Ani
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));
}
