相关疑难解决方法(0)

我几个小时都在尝试,但我没有得到任何有效的解决方案.任务是:创建一个具有动态宽度和居中标签的进度条,该进度条在进度和未进入的部分之间更改其文本颜色.这是一张图片以供澄清:

如果我知道整个进度条的宽度,那么这很有效.但它在响应式设计中无法使用,它的宽度是自动计算的.

这是我的代码:

<div class="progress" style="width: 400px;">
 <div class="progressValue" style="width: 50%">
  <div class="progressInnerLabel" style="width: 400px;">I'm a progress text</div>
 </div>
 <div class="progressLabel">I'm a progress text</div>
</div>

我的CSS:

.progress {
    position: relative;
}

.progressValue {
    overflow: hidden;
    position: absolute;
    height: 20px;
    background-color: blue;    
}

.progressInnerLabel {
    position: absolute;
    text-align: center; 
    color: white;  
    height: 20px;    
}

.progressLabel {
    background-color: #eee; 
    text-align: center; 
    color: black;    
}

我也创造了一个小提琴,所以你可以玩它:http://jsfiddle.net/Q82kF/2/

我想删除我的html的第一个div(class = progress)的宽度:400px,因此进度自动获得完整的可用宽度.有人有解决方案吗？

我不想用javascript(或任何lib)来做它.我认为必须有一个CSS/HTML唯一的解决方案.

我正在尝试设计一个进度条，如下所示：

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

我尝试了各种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>