文本混合在背景颜色

Question

我试图设置一个如下所示的进度条：

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

我尝试了各种 start = file.find('Bad value') # remove + 9 here, put it later end = file.find('SPAN', start) if start != -1 and end != -1: # test if key words can be found, -1 for not found: return(file[start+9:end]) else: return "" 和mix-blend-mode: difference组合，无法实现这一目标。 裸露的例子here 我还尝试了color

＆＃13;

＆＃13;

filter: grayscale(1) contrast(9);

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

为了获得更好的灵活性，您可以使用CSS变量来控制进度：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;