Текст смешивается с цветом фона

Question

Я пытаюсь оформить индикатор выполнения, который выглядит следующим образом:

Левая часть может иметь разные цвета (зеленый, оранжевый и т. Д.), И я хочу, чтобы текст менял цвет в соответствии с фоном внизу. В идеале, он должен быть черным / темно-серым над светло-серой правой частью (как в примере), таким же черным / темно-серым, когда левая часть довольно светлая, и белым, когда левая часть довольно темная (как, например, зеленый в примере).

Я пробовал различные комбинации mix-blend-mode: difference и color, но не смог этого добиться. Голый пример здесь Я попробовал также что-то вместе 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

Вы можете создать еще один градиент для окраски текста без использования режима смешивания:

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

.text {
  background: linear-gradient(to right, white 50%, black 0) no-repeat;
  -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>

А для большей гибкости вы можете использовать переменную CSS для контроля прогресса:

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

.text {
  background: linear-gradient(to right, white var(--p,50%), black 0) no-repeat;
  -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>