你能使用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表示不透明，为0表示透明。

- Jasper

---

你可能指的是第一个值为 (255, 255, 255, 1)。 - Arseni Mourzenko

代码实际上并没有起作用，似乎缺少了逗号和括号。 - Toby Hede

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 */
);

- antonj

---

感谢您提供这个美妙的小提琴！ - KajMagnus

创建一个 SVG 渐变并对其进行 Base64 编码 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyPC9saW5l...3N2Zz4g'); - antonj

Answer 3

虽然没有测试，但这应该可以工作（在Firefox中使用不同的语法可以工作 - 我不确定Safari / Webkit是否支持rgba）：

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

- oezi

---

我可能误解了一些东西，但是你为什么期望一个带有-webkit前缀的属性在Firefox中能够工作呢？（-webkit适用于Chrome和Safari以及其他一两个浏览器；-moz适用于Firefox；-o适用于Opera；-ms显然适用于IE...） - David Thomas

谢谢你的提示，我已经编辑好了……我只是忘了写一些文字（这就是星期天晚上在Stack Overflow上冲浪时喝酒的后果-.-'） - oezi