如何结合duotone效果和CSS混合模式：差异

我有一个非常具体的案子，我不能在这里解决。我目前正在尝试实现一个设计，它严重依赖于渐变和混合模式。我想要达到的是，黑色变成1色，白色变成2色

编辑：我的渐变不是标准的线性或径向渐变。我使用不同的图层和随机定位的元素来创建一个有机梯度，如下所示

我认为可行的解决方案是使用SVG

过滤器将我的黑白范围映射到我的两种自定义颜色。当我将其应用于处于

混合混合模式：difference

的前景元素时，效果很好，但当我将其应用于黑白渐变背景时，CSS混合模式会拾取颜色，duotone效果不再起作用

任何关于如何解决这个问题的帮助或建议都将不胜感激！

---

谢谢

也许你可以简单地考虑两种不同的渐变，一种是文本的颜色，另一种是背景颜色。 以下是一个基本示例：

.container{
字体大小：25px；
文本对齐：居中；
背景：径向梯度（圆形、红色、蓝色、红色）；
}
.container>div{
溢出：自动；
背景：径向梯度（圆形、蓝色、红色、蓝色）；
-webkit背景剪辑：文本；
背景剪辑：文本；
颜色：透明；
}

乱数假文
Lorem ipsum dolor sit amet，是一位杰出的献身者。在梅特斯，前痉挛、后臀肌、前臀舌苔、后臀肌和后臀肌。Mauris Dignessim malesuada lectus，metus的lobortis Elat eros。Mauris Dignessim malesuada lectus，metus的lobortis Elat eros。Mauris Dignessim malesuada tincidun

<或>代码> 
也许你可以简单地考虑两种不同的渐变，一种是文本颜色，另一种是背景颜色。
以下是一个基本示例：

.container{
字体大小：25px；
文本对齐：居中；
背景：径向梯度（圆形、红色、蓝色、红色）；
}
.container>div{
溢出：自动；
背景：径向梯度（圆形、蓝色、红色、蓝色）；
-webkit背景剪辑：文本；
背景剪辑：文本；
颜色：透明；
}

乱数假文
Lorem ipsum dolor sit amet，是一位杰出的献身者。在梅特斯，前痉挛、后臀肌、前臀舌苔、后臀肌和后臀肌。Mauris Dignessim malesuada lectus，metus的lobortis Elat eros。Mauris Dignessim malesuada lectus，metus的lobortis Elat eros。Mauris Dignessim malesuada tincidun

嘿！谢谢你的回答。也许在我的截图上还不够清晰，但我的背景比径向渐变更复杂，我建立了一个逻辑来创建一个有机渐变。。。这就是为什么我要研究类似于我用svg过滤器解释的解决方案。我会把我的问题说得更清楚。@PaulLacour同样的技巧也适用，你创建两个不同的背景，一个应用在容器上，另一个应用在textuhh nice上，我会仔细研究：）如果CSS元素（）函数得到了广泛的支持，然后我就可以选择随机生成的自定义渐变作为背景，但我想我必须寻找另一种解决方案。@PaulLacour在问题中分享您生成的渐变以及用于生成渐变的代码！谢谢你的回答。也许在我的截图上还不够清晰，但我的背景比径向渐变更复杂，我建立了一个逻辑来创建一个有机渐变。。。这就是为什么我要研究类似于我用svg过滤器解释的解决方案。我会把我的问题说得更清楚。@PaulLacour同样的技巧也适用，你创建两个不同的背景，一个应用在容器上，另一个应用在textuhh nice上，我会仔细研究：）如果CSS元素（）函数得到广泛支持，然后我可以选择随机生成的自定义渐变作为背景，但我想我必须寻找另一种解决方案。@PaulLacour在问题中分享生成的渐变以及生成渐变的代码示例按设计工作-文本中有渐变的倒数-你想达到什么效果？这个例子是按设计的-你的文本中有梯度的倒数-你想达到什么效果？