所以我在工作中得到了这段代码，并被要求找到一种方法来改进它。我们正在使用包含单独标签的 HTML5 进度元素。
使用
将标签放置在进度条上margin-top: -40px;
因为进度条具有固定的高度。
我为你做了一个jsfiddle，这样你就可以看到进度元素是如何实现的。
https://jsfiddle.net/o3y6zxdx/
现在我想编辑代码，使进度条覆盖的标签部分改变其颜色。在上面的 fiddle 中，“Loadi”应显示为白色。
由于我是编码新手，因此我在执行此任务时遇到一些问题，那么有什么方法可以实现这一点吗？
提前致谢!
最佳答案
要仅使用 progress 元素实现您想要的效果，您需要使用 JavaScript 和 2 个标签，这可能不是最有效的方法。
不需要 JavaScript 的解决方案是使用 div 制作进度条，而不是使用 progress 元素。内部 div 具有白色文本，外部 div 具有黑色文本。当 div 重叠以创建进度条时，白色文本将在 56% 处被 chop ，从后面显示其余的黑色文本。
#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/
关于javascript - 当进度标签与栏重叠时如何反转进度标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37384260/