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

【问题标题】：More control over colors in mix-blend mode在混合混合模式下更好地控制颜色
【发布时间】：2021-09-17 14:29:30
【问题描述】：

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

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

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

有人有想法吗？在最坏的情况下，js 解决方案对我来说也很好。

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

【问题讨论】：

标签： javascript css sass mix-blend-mode

【解决方案1】：

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

这是一个简单的 sn-p，它只是为文本和背景设置样式以给出想法：

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, black 50%, white 50%, white 100%);
  color: transparent;
}

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

【讨论】：

谢谢，但我不明白如何在我的 stackblitz 中使用它。我有一个在悬停时移动的伪元素。