如何结合双色调效果和CSS mix-blend-mode：difference

问题描述

我有一个非常具体的案例，在这里我无法解决。我目前正在尝试实现一种严重依赖于渐变和混合模式的设计。我想要实现的是this effect，其中黑色变成1号颜色，白色变成2号。

编辑：我的渐变不是标准的线性或径向渐变。我使用随机放置元素的不同图层来创建 organic 渐变，如下所示。

我认为可行的解决方案是使用SVG <feComponentTransfer>滤镜将黑白范围映射到我的两种自定义颜色。当我将其应用于mix-blend-mode: difference (step 2)中的前景元素时，它可以很好地工作，但是一旦将其应用于黑白渐变背景，CSS混合模式就会拾取颜色和双色调效果不再起作用。 (step 3)

任何有关如何解决该问题的帮助或建议将不胜感激！ 谢谢

解决方法

也许您可以简单地考虑两个不同的渐变，一个为文本着色，另一个为背景着色。

这是一个基本示例：

git rm -f --cached client && git add . && git commit -m 'Add client folder back to git repo' && git push heroku master

.container {
  font-size:25px;
  text-align:center;
  background:radial-gradient(circle,red,blue,red);
}

.container > div {
  overflow:auto;
  background:radial-gradient(circle,blue);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}