Css 文本与背景色混合

我正在尝试设计一个进度条，如下所示：

左侧部分可以有不同的颜色（绿色、橙色等），我希望文本根据下面的背景改变颜色。理想情况下，右侧浅灰色部分应为黑色/深灰色（如示例中所示），左侧部分较亮时为相同的黑色/深灰色，左侧部分较暗时为白色（如示例中的绿色）

我尝试了各种

mix混合模式：difference

和

color

组合，但无法实现这一点。 赤裸裸的例子 我还尝试了一些滤镜：灰度（1）对比度（9）

.container{
宽度：200px；
高度：20px；
位置：相对位置；
背景色：#eee；
文本对齐：居中；
}
.进展{
位置：绝对位置；
排名：0；
左：0；
宽度：50%；
身高：100%；
背景色：#43a047；
}
.文本{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
混合模式：差异化；
颜色：白色；
}

这里有一些文字

您可以创建另一个渐变来为文本着色，而无需使用混合模式：

.container{
宽度：200px；
高度：20px；
背景：线性梯度（向右，#43a047 50%，#eee 0）；
文本对齐：居中；
}
.文本{
背景：线性渐变（向右，白色50%，黑色0）；
-webkit背景剪辑：文本；
背景剪辑：文本；
颜色：透明；
-webkit文本填充颜色：透明；
字体大小：粗体；
}

这里有一些文字

对不起，我的错。使用渐变确实更简单，但是1）webkit特有的属性呢？2） 现在左边部分的文本总是白色的，但是当颜色是浅的时候我需要它是黑色的（例如#ff9800）@stanley90 1）我添加了非webkit的一个，你可以在这里有更多的信息：2）正如你看到的，你可以指定你想要的颜色，因为你现在有两个渐变，所以简单地用你想要的任何颜色改变白色