CSS3 透明度 + 渐变

Question

RGBA 非常有趣，-webkit-gradient、-moz-gradient 和呃... progid:DXImageTransform.Microsoft.gradient 也是如此...是的。 :)

有没有办法将 RGBA 和渐变这两者结合起来，以便使用当前/最新的 CSS 规范实现 alpha 透明度的渐变。

Answer 1

是的。您可以在 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 )