css - 文本混合在背景颜色上

Question

我正在尝试设置如下所示的进度条样式:

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

我尝试了各种mix-blend-mode: difference 和color 组合，都无法实现。裸例 here我还尝试了 filter: grayscale(1) contrast(9);

.container {
  width: 200px;
  height: 20px;
  position: relative;
  background-color: #eee;
  text-align: center;
}

.progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #43a047;
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: difference;
  color: white;
}

<div class="container">
  <div class="progress"></div>
  <div class="text">Some text here</div>
</div>

Answer 1

您可以在不使用 mix-blend 模式的情况下创建另一个渐变来为文本着色:

.container {
  width: 200px;
  height: 20px;
  background: linear-gradient(to right, #43a047 50%, #eee 0);
  text-align: center;
}

.text {
  background: linear-gradient(to right, white 50%, black 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

<div class="container">
  <div class="text">Some text here</div>
</div>

为了更好的灵 active ，您可以使用 CSS 变量来控制进度:

.container {
  width: 200px;
  height: 20px;
  margin:5px;
  background: linear-gradient(to right, #43a047 var(--p,50%), #eee 0);
  text-align: center;
}

.text {
  background: linear-gradient(to right, white var(--p,50%), black 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

<div class="container" style="--p:80%">
  <div class="text">Some text here</div>
</div>

<div class="container" style="--p:20%">
  <div class="text">Some text here</div>
</div>
<div class="container">
  <div class="text">Some text here</div>
</div>