你能用CSS或JavaScript创建渐变到不透明度的渐变吗？

Question

WebKit引入了创建CSS渐变的功能.例如,使用以下代码:

-webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));

但是,使用CSS可以使用不透明度渐变吗？我希望渐变在一侧是单色,在另一侧渐变为零不透明度.

跨浏览器兼容性并不重要; 我只需要它在谷歌浏览器中工作.

有没有办法用CSS做到这一点？如果没有,可以使用JavaScript(而不是jQuery)完成类似的事情吗？

谢谢你的帮助.

Answer 1

是

对于颜色,使用rgba(x,y,z,o),其中o是不透明度

应该管用

例如

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));

编辑: 对于最终值(不透明度)1是不透明的,0是透明的

Answer 2

是啊,rgba(red, green, blue, alpha)是你应该用什么http://www.w3.org/TR/css3-color/#rgba-color,例如(试试吧上的jsfiddle):

/* Webkit */
background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(1, rgba(0,0,0,0.0)), /* Top */
    color-stop(0, rgba(0,0,0,1.0)) /* Bottom */
);

/* Gecko */
background: -moz-linear-gradient(
    center bottom,
    rgba(0,0,0,1.0) 0%, /* Bottom */
    rgba(0,0,0,0.0) 100% /* Top */
);