CSS3透明度+渐变
RGBA非常有趣，所以是-webkit-gradient ， -moz-gradient和uh ... progid:DXImageTransform.Microsoft.gradient ...是的。 :)
有没有办法将RGBA和渐变这两者结合起来，以便使用当前/最新的CSS规范来实现alpha透明度的渐变。
是。 您可以在webkit和moz梯度声明中使用rgba：
/* webkit example */
background-image: -webkit-gradient(
linear, left top, left bottom, from(rgba(50,50,50,0.8)),
to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);
（SRC）
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);
（SRC）
显然，你甚至可以在IE中使用奇怪的“扩展十六进制”语法来做到这一点。 第一对（在例子55中）是指不透明度的等级：
/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#550000FF, endColorstr=#550000FF
);
/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#550000FF, endColorstr=#550000FF
);
（SRC）
所有现代浏览器（从Chrome 26，Opera 12.1，IE 10和Firefox 16开始）都支持新的语法 ：http://caniuse.com/#feat=css-gradients
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
这呈现出从顶部的纯黑色开始到底部完全透明的渐变。
有关MDN的文档 。
这是一些非常酷的东西！ 我需要几乎相同的，但从白色到透明的水平渐变。 它工作得很好！ 这里是我的代码：
.gradient{
/* webkit example */
background-image: -webkit-gradient(
linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
to(rgba(255, 255, 255, 0))
);
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
right center,
rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
);
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(
gradientType=1, startColor=0, endColorStr=#FFFFFF
);
/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
gradientType=1, startColor=0, endColoStr=#FFFFFF
);
}