前端：关于进度条上的字的问题，字的颜色是怎么随着背景色的变化而变化的

Question

前端：关于进度条上的字的问题，字的颜色是怎么随着背景色的变化而变化的，求大神指点一二，蟹蟹具体效果如下甚至是我是说，前端如何实现的，求大神指点一二，蟹蟹

Answer 1

想了好久...大概OK...

<div class="bg">

  <span class="text">0%</span>

  <div class="progress" style="width: 0%;">

    <span class="text">0%</span>

  </div>

</div>

.text {

  position: absolute;

  left: 125px;

  transform: translateX(-50%);

  font-size:25px;

}

.bg {

  background: #fff;

  border-radius: 5px;

  border: 1px solid #6cf;

  width : 250px;

  height: 50px;

  line-height: 50px;

  position: relative;

}

.bg > .text {

  color: #6cf;

}

.progress {

  position: absolute;

  height: 100%;

  background: #6cf;

  overflow: hidden;

}

.progress > .text {

  color: #fff;

}