Question

所以我在工作中得到了这个代码，并被要求找到改进它的方法。我们使用的HTML5进度元素包含一个单独的标签。

使用

将标签放在进度条上

margin-top: -40px;

因为进度条有一个固定的高度。

我为你做了一个jsfiddle，你可以看到progress元素是如何实现的。

https://jsfiddle.net/o3y6zxdx/

现在我想编辑代码的方式是标签的一部分（由进度条覆盖）改变其颜色。在上面的小提琴中，“Loadi”应显示为白色。

由于我是编码新手，我对此任务有一些问题，有没有办法实现这个目标？

提前致谢！

Answer 1

要使用progress元素实现您想要的效果，您需要使用JavaScript和2个标签，这可能不是最有效的方法。

不需要JavaScript的解决方案是让您的进度条超出div，而不是使用progress元素。内部div有白色文字，外部div有黑色文字。当divs重叠以创建进度条时，白色文本将被截断为56％，从后面显示其余的黑色文本。

#bar {
  color: black;
  position: relative;
  background-color: gray;
}
#progress {
  position: absolute;
  width: 56%;
  background-color: green;
  color: white;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
}
.progress-bar {
  overflow: hidden;
  height: 40px;
}
.full-width {
  width: 300px; // set the desired width of your progress bar
}
.text {
  position: absolute;
  text-align: center;
  top: 12px;
  bottom: 0;
  line-height: 1;
}

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div id="bar" class="progress-bar full-width">
      <div class="text full-width">
        Loading...56%
      </div>
      <div id="progress" class="progress-bar">
        <div class="text full-width">
          Loading...56%
        </div>
      </div>
    </div>
  </body>
</html>

JSfiddle：https://jsfiddle.net/tnkswtw3/18/

如何在与条形图重叠时反转Progress-Label

1 个答案: