Css 如何根据背景反转笔划文本颜色

我有两个50%宽度的div。有一个巨大的标题h1应该有这两个div的颜色。我尝试过混合模式，但当设置为“差异”时，它会给我一些随机颜色。我的目标是反转颜色，但保持div的颜色。这是一个代码笔文件，我已尝试使其尽可能简单： 在本例中，最终效果应类似于on：

但是我不确定为什么它不能和这些颜色搭配。 此外，这些div是交互式的，因此颜色必须随着div在悬停时宽度的增加而动态变化，并且应该只有没有任何填充的文本笔划

正文{
高度：100vh；
宽度：100%；
位置：相对位置；
背景色：#510035；
保证金：0自动；
}   
h1{
字体大小：4.7em；
文本转换：大写；
}
.半传呼机{
宽度：50%；
身高：100%；
位置：绝对位置；
显示：内联块；
溢出：隐藏；
文本对齐：居中；
}
.半传呼机暗{
背景色：#510035；
}
.半传呼机灯{
右：0；
背景色：#E8E8E8；
浮动：对；
}
.lp头{
位置：绝对位置；
}
.lp头{
颜色：透明；
混合模式：差异化；
-webkit文本笔划：3倍rgb（126124133）；
z指数：1；
}
.lp头{
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

左或右

一种方法是复制文本，并使用CSS变量定义颜色，以便您可以在一个位置轻松更改它们。我使用“剪辑路径”隐藏一个文本的一半，并显示另一半：

正文{
保证金：0；
--c1:#510035；
--c2:#E8E8E8；
}
身体：悬停{
--c1：红色；
--c2：蓝色；
}
h1{
字体大小：4.7em；
文本转换：大写；
保证金：0；
}
.首先{
背景：var（--c1）；
-webkit文本笔划：3px变量（--c2）；
}
.第二{
背景：var（--c2）；
-webkit文本笔划：3px变量（--c1）；
剪辑路径：多边形（0%0%，50%0%，50%100%，0%100%）；
}
.lp头{
位置：绝对位置；
排名：0；
左：0；
右：0；
最小高度：100vh；
框大小：边框框；
颜色：透明；
z指数：1；
填充：50px；
文本对齐：居中；
过渡：0.5s；
}

左还是右
左侧或右侧

您可以显示预期结果吗？你想反转什么颜色？我没有编码版本，但我的意思是，红色背景上的文本部分应该是白色的div，白色背景上的文本部分应该是左（红色）div。与此最接近的是：我有颜色。我曾经尝试过使用这段代码，但它对我不起作用。可能重复这段代码会是一个很好的解决方案，但在项目中，这些div是交互式的，它们正在更改悬停的宽度，就我所理解的这段代码而言，这将遵循它。另外，我只需要一笔文字，没有任何fill@Luka好的，你能编辑这个问题，让它更清楚，你想要的笔划和颜色是动态的吗？这正是我需要的！非常感谢您抽出时间