CSS3透明度+渐变

  • Z时代
  • 2024-01-10
  • 分类：问答

RGBA是非常有趣的，所以是-webkit-gradient，-moz-gradient和呃…

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）

以上是 CSS3透明度+渐变 的全部内容， 来源链接： utcz.com/qa/435382.html

回到顶部