使用 CSS cross-fade() 函数混合颜色

以下内容的浏览器兼容性欠佳，在生产环境中请谨慎使用！

在一个项目中，我希望将某个组件的背景颜色设置为 canvas.subtle 的颜色，且有 30% 的透明度。然而为了支持 各种主题，我又不能直接将 canvas.subtle 的颜色 #f6f8fa（毕竟这只是 Light 主题的颜色，还有另外 8 种主题）转为 rgb 再加个透明度使用。

此时，我就祭出了搜索引擎大法，一翻查找后就找到了 这篇文章，然而这篇文章通篇讲的都是让两个图片进行混合，而没有讲如何混合颜色，幸亏那时我的好奇心作祟，打开了 CSS cross-fade() 函数的 MDN 页面，看了一下 cross-fade() 的语法¹：

<cross-fade()> =
  cross-fade( <cf-image># )

<cf-image> =
  <percentage [0,100]>?  &&
  [ <image> | <color> ]

<image> =
  <url>       |
  <gradient>

<url> =
  url( <string> <url-modifier>* )  |
  src( <string> <url-modifier>* )

看，<cf-image> 可以为 <color> 类型，这不就可以指定颜色了吗？但是，浏览器兼容性表 中还有这么一句话：

Supports the original dual-image with percentage implementation only.

也就是说，先不管 Firefox 不支持 cross-fade()（幸亏我也不需要适配 FireFox），在 <cf-image> 中，Chrome/Edge 浏览器只支持 <image> 类型，不支持 <color> 类型，那这可怎么办呢？别急，让我们接着往下看 cross-fade() 的语法。

向下看一行，<image> 类型支持两种参数类型，一个是 <url>，另一个是 <gradient>。<url> 类型没什么好说的，值得注意的是 <gradient> 类型，它可以设置一个颜色过渡，通常我们都给它几种颜色，从而生成一个好看的渐变色。

那么，能不能给 gradient() 函数传入两个相同的颜色，使它产生单独的颜色而不是渐变色呢？经测试，这是可以的：
https://codepen.io/zhoushengd...

如此，只要向 cross-fade() 函数传入两个 <gradient> 类型的值就可以混合两种颜色了。进一步的，只要其中一种颜色为透明色 transparent，就能为某一种颜色设置透明度，而不使用 rgba() 等函数。代码如下：

background-image: -webkit-cross-fade(
  linear-gradient(#ef475d, #ef475d),
  linear-gradient(transparent, transparent),
  30%
);

上面的代码中，第 2-3 行已经解释过了，分别是两种需要混合的颜色，至于第四行，则是透明色所占的比例，也就是透明度，更改它的值，可以看到如下效果：
https://codepen.io/zhoushengd...

---

1. 目前，浏览器所支持的语法为 较旧的语法：cross-fade( <image>, <image>, <percentage> )，但是 <image> 仍然支持 <gradient> 类型作为参数。所以，在我的 Microsoft Edge 109.0.1518.78、Google Chrome Canary 112.0.5577.0、Opera 95.0.4635.25 和 Android System WebView 106.0.5249.126 上，上述代码均能正常显示。 ↩