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

Question

前端：关于进度条上的字的问题，字的颜色是怎么随着背景色的变化而变化的，求大神指点一二，蟹蟹

具体效果如下

甚至是

我是说，前端如何实现的，求大神指点一二，蟹蟹

Answer 1

想了好久...大概OK...<div class="bg">&nbsp; <span class="text">0%</span>&nbsp; <div class="progress" style="width: 0%;">&nbsp; &nbsp; <span class="text">0%</span>&nbsp; </div></div>.text {&nbsp; position: absolute;&nbsp; left: 125px;&nbsp; transform: translateX(-50%);&nbsp; font-size:25px;}.bg {&nbsp; background: #fff;&nbsp; border-radius: 5px;&nbsp; border: 1px solid #6cf;&nbsp; width : 250px;&nbsp; height: 50px;&nbsp; line-height: 50px;&nbsp; position: relative;}.bg > .text {&nbsp; color: #6cf;}.progress {&nbsp; position: absolute;&nbsp; height: 100%;&nbsp; background: #6cf;&nbsp; overflow: hidden;}.progress > .text {&nbsp; color: #fff;}