1

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

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

我认为可行的解决方案是使用 SVG<feComponentTransfer>过滤器将我的黑白范围映射到我的两种自定义颜色。mix-blend-mode: difference 当我将它应用到（步骤 2）中的前景元素时效果很好，但是一旦我将它应用到我的黑白渐变背景，CSS 混合模式就会拾取颜色并且双色调效果不再起作用. （第 3 步）

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

4

1 回答 1

0

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

这是一个基本示例：

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

.container > div {
  overflow:auto;
  background:radial-gradient(circle, blue, red, blue);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
<div class="container">
  <div>
    <h1> lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis, risus id accumsan iaculis, ligula ex pellentesque lectus, vel lobortis erat eros in metus. Mauris dignissim malesuada lectus, vel lobortis erat eros in metus. Mauris dignissim malesuada lectus, vel lobortis erat eros in metus. Mauris dignissim malesuada tincidun</p>
  </div>
</div>

于 2020-08-28T19:56:09.607 回答