在混合混合模式下对颜色进行更多控制

Question

我花了一整天的时间试图找到一个解决方案，当倾斜元素覆盖文本时对其进行着色。我已经用混合混合模式部分解决了这个问题。但我不喜欢你不能完全控制颜色。

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

我在这里创建了一个Stacklitz。对于黄色背景，当元素放置在文本上时，文本应该是黑色并变为白色，这在mix-blend-mode中似乎是不可能的。

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

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

Answer 1

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

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

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>