Html 反转彩色文本相关背景

我想根据文本的背景反转文本颜色，如下图所示：

因此，我尝试了以下代码，但不起作用：

#扭曲，
#文本，
#三{
位置：绝对位置；
排名：0；
左：0；
宽度：150px；
高度：150像素；
z指数：1；
}
#扭曲{
背景颜色：橙色；
}
#正文{
文本对齐：居中；
z指数：3；
}
#文本h1{
保证金：0；
线高：150px；
混合模式：差异化；
}
#三{
背景色：黑色；
剪辑路径：多边形（0,0,100%，99.8%150px）；
-webkit剪辑路径：多边形（0,0,100%，99.8%150px）；
z指数：2；
}

正文

如果您只需将相同的文本添加到

tri

层，则它可以工作：

编辑：为了允许选择文本，我添加了另一个透明层，将所有文本包装为一个单元。但是，它确实会使更新更加重复。作为解决方案，我添加了附加的JavaScript代码（这不是必需的）

var text=“text”；
var textElements=document.getElementsByTagName（“h1”）；
对于（var i=0；i您可以通过使用线性渐变作为背景来避免剪辑路径，
混合模式将完美工作：


#文本{
宽度：150px；
高度：150像素；
z指数：1；
}
#正文{
文本对齐：居中；
背景：线性渐变（右上角，黑色50%，橙色51%）；
}
#文本h1{
保证金：0；
线高：150px；
混合模式：差异化；
颜色：#fff；
}

正文
如果用户想要选择文本怎么办？@Huelfe OP没有提到这一点，但你是对的。作为更好的UI的一部分，它更可取。我添加了另一个“包装”的透明层所有的文本作为一个单元。但是它使整个代码有点多余，现在文本重复了3次…不容易处理如果可以使用JS，它很容易解决。无论如何，我看不到一种不使用多层的方法来实现这种多色效果；）检查我的答案。。。这是mix blend的主要用途，你在他的代码中没有注意到这一点。更加优雅。这里唯一的问题是您无法调整其他颜色（在本例中为浅蓝色）@GalAbra no:）您可以通过调整混合混合方法来调整它；）有很多选项允许选择要应用的过滤器