Html 如何根据同级元素的背景颜色更改文本颜色

我试图得到一个类似于这里描述的效果。问题是我的一个背景元素不是我试图改变颜色的文本元素的父元素，产生了一个不想要的结果，我不知道如何达到我想要的效果。我得到的结果如下图所示：

我希望绿色倾斜带上的文本是白色的，而白色区域上的文本是绿色的。我曾尝试将其放入绿色波段div中，但当我将倾斜效果添加到波段（使用clip path或skewX）时，它会被剪裁或扭曲。用于获得图中所示结果的代码如下：

绿色波段{ 位置：绝对位置； 宽度：80%； 身高：100%； 背景色：#9DC42E； 变换：skewX（-45度）； } #绿带~h1{ 颜色：#623BD1； 混合模式：差异化； } #绿带~h3{ 混合模式：差异化； }

乌比卡奇·埃斯特拉特·伊卡
佩雷拉中心10分钟独奏
塞尔卡航空港酒店

试试绿色带~h1，把白色带进去。

绿色波段{ 位置：绝对位置； 宽度：80%； 身高：100%； 背景色：#9DC42E； 变换：skewX（-45度）； } #绿带~h1{ 颜色：#623BD1； 混合模式：颜色减淡； } #绿带~h3{ 混合模式：差异化； }

JS-Bin
乌比卡奇·埃斯特拉特·伊卡
佩雷拉中心10分钟独奏
塞尔卡航空港酒店

我试过了，但我得到的是白色背景上的黑色文本，绿色带上的文本接近紫色。我尝试在#绿色带~h1中将混合混合模式更改为颜色减淡，但我得到的是所有白色文本，这意味着只看到绿色带上的部分。我不知道为什么我的结果与您的答案中的代码片段不同，其中绿色带上的文本是白色的（正如我们所希望的），但白色背景上的文本是紫色的，因为您需要在使用混合模式的类/id上设置所需的颜色。