您可以使用 CSS 或 JavaScript 创建渐变为不透明的渐变吗？

Question

WebKit 引入了创建 CSS 渐变的功能。例如，使用以下代码：

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

但是，是否可以使用 CSS 实现不透明度渐变？我希望渐变一侧为单色，另一侧渐变至零不透明度。

跨浏览器兼容性并不重要；重要的是。我只需要它在 Google Chrome 中工作即可。

有没有办法使用 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 是不透明的，而 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 */
);

Answer 3

未经测试，但这应该可以工作（在 FF 中可以工作（使用不同的语法）-我不确定 safari/webkit 是否知道 rgba）：

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