CSS3 透明度 + 渐变

小编典典

CSS3 透明度 + 渐变

all

RGBA 非常有趣，-webkit-gradient, -moz-gradient, 和 uh…
progid:DXImageTransform.Microsoft.gradient… 是的。:)

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

阅读 101

2022-04-26

共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)
);

(源)

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

(源)

显然，您甚至可以在 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
);

(源)

2022-04-26