在混合模式下更好地控制颜色

问题描述

我一整天都在尝试找到一种解决方案，当倾斜的元素覆盖在文本上时为文本着色。我已经用混合模式部分解决了这个问题。但我不喜欢你不能完全控制颜色。

按钮应该有多种不同的颜色，并且您必须能够清楚地定义文本应该具有什么颜色以及当元素移动到它上面时应该具有什么颜色。

我在这里创建了一个 Stackblitz。使用黄色背景时，文本应该是黑色的，当元素放置在它上面时会变成白色，这似乎无法使用 mix-blend-mode。

有人有想法吗？在最坏的情况下，js 解决方案也适合我。

https://stackblitz.com/edit/mix-blend-mode-text-color?file=styles.scss

解决方法

我还没有找到使用混合混合模式的合适答案，但是，根据您的用例，您可以使用背景剪辑和线性渐变获得所需的效果，因为您可以完全控制颜色。

这是一个简单的片段，它只是对文本和背景进行样式设置以提供想法：

button {
  background-image: linear-gradient(-45deg,#f7ff14 0,#f7ff14 50%,black 50%,black 100%);
}

button span {
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(-45deg,black,white 50%,white 100%);
  color: transparent;
}

<button>
      <span>Weiter</span>
    </button>