关于渐变和“透明黑色”你需要知道的事

假设您在 CSS 中有一个从红色到透明的渐变。 轻松，对吧？ 像这样

.element {
  background: linear-gradient(
    to bottom,
    red, 
    transparent
  );
}

不过，这里有一个很大的陷阱。

在 Chrome（也包括 Android）、Firefox 和 Edge 中，一切正常。

但在 Safari（也包括 iOS）中，则不正常。

据我所知，问题在于透明被解释（和插值）为“透明黑色”。

要解决它，您必须将颜色设置为该精确颜色的完全透明版本。 像这样

.element {
  background: linear-gradient(
    to bottom,
    red,
    rgba(255, 0, 0, 0)
  )
}

使用十六进制代码并不总是容易，因为 RGBa 或 HSLa 等效项并不明显。 不过，找到颜色转换器并不难，只需在网上搜索即可。

CSS Level 4 的color() 函数将使此操作更加容易，例如

.element {
  background: linear-gradient(
    to bottom,
    #eb8fa9,
    color(#eb8fa9 alpha(0%)) /* or is it color-mod()? */
  )
}

但对它的支持尚未普及。

如果您使用的是 Sass，它可以提供帮助

.element {
  background: linear-gradient(
    to bottom,
    #eb8fa9,
    rgba(#eb8fa9, 0);
  )
}