Html 有没有办法改变文字的颜色；“半途而废”；通过网页上的字符？

我在一些桌面应用程序中看到的一件事是，随着背景的变化，可以改变文本的颜色——在一个字符上有效地使用多种颜色。我经常在进度条中看到这种情况，进度条显示进度条中的百分比。通常，较暗的背景色将用作进度条颜色，并且随着进度，深色与深色文本的对比度不够，因此一旦进度条与文本重叠，文本颜色就会发生变化。这幅图应该解释我的意思：

正如您所看到的，文本在0%时是黑色的——当没有黑色背景时。当背景图像完全前进到100%时，文本完全为白色。但是在中间，正如你在50%中看到的，文本是半黑/半白，实际上它在这个例子中的“0”字符上分裂。 在网页上有没有办法做到这一点？CSS、图像、Jquery等等？（最好不是Flash或Java小程序——我真的想知道基于HTML的解决方案是否可行。）谢谢

我会让你开始：

创建两个大小相等的“进度条”（

div

s）。将其大小设置为100%时的全宽

根据上面的示例，将一个栏设置为带白色背景的黑色文本，另一个栏设置为带蓝色背景的黄色文本

在父级

div

中设置黄色/蓝色条，并在每增加一个百分比时增加父级的宽度。将父对象放置在黑白条上方

同样在每次增加时，更新两个进度条的标签以表示百分比

这将模拟相同的效果，而无需手动绘制半个角色。在CSS中这将是困难的，因为您必须将一个放置在另一个之上

---

这样做的好处是，您可以轻松地显示半绘字符。不过，已经有一个jQuery进度条可以使用。

这确实很有趣。这是你的进度条。在IE5.5+和Safari 5（我测试过的浏览器）中运行良好

使用系统颜色：D

你可以省略

value=value>100？100：值<0？0:value

如果确保传递给函数的值介于0和100之间

---

编辑：

---

我将

innerText

更改为

innerHTML

，以便在Firefox中工作。我没有意识到这一点。我还将CSS

display:inline block

更改为

display:block

。我知道这样你就不能再让进度条内联了，但这使它在Netscape 9中工作。

这里有另一个实现：

HTML:

JS/jQuery：

$(function() {
    $("button").click(function() {
        var start = 0;
        var interval = setInterval(function() {
            if(start >= 100) clearInterval(interval);
            $(".progressBar").find(".background, .foreground")
                             .text(start + "%")
                             .end()
                             .find(".container")
                             .css("width", start++ + "%");
        }, 10);    
    });
});

---

这个，在父div上有

overflow:hidden

。是的，CSS非常棘手。但我成功地做到了看看我的答案。非常令人印象深刻的剧本，迈达斯！然而，在Webkit浏览器（Chrome 30.0.1599.101，Safari 7.0）中，这似乎不再有效。感谢您为制定有效的解决方案花费了大量时间，这可能不是“公认的答案”，但不要低估这样的资源对其他人的帮助！我实际上没有使用你的代码，但它确实激发了我的灵感，让我想到了一些东西：）它似乎是坏的，因为Chrome不尊重系统颜色，因此文本颜色总是黑色的。在CSS中设置固定颜色可以解决这个问题。

function add(bar, value) {
    bar = document.getElementById(bar);
    value = parseInt(bar.getAttribute('progress'), 10) + value;
    value = value > 100 ? 100 : value < 0 ? 0 : value;
    var text1 = bar.getElementsByTagName('span')[0];
    var overlay = bar.getElementsByTagName('strong')[0];
    var text2 = bar.getElementsByTagName('em')[0];
    overlay.style.width = value / 10 + 'em';
    text1.innerHTML = text2.innerHTML = value + '%';
    bar.setAttribute('progress', value);
}
function set(bar, value) {
    value = value > 100 ? 100 : value < 0 ? 0 : value;
    bar = document.getElementById(bar);
    var text1 = bar.getElementsByTagName('span')[0];
    var overlay = bar.getElementsByTagName('strong')[0];
    var text2 = bar.getElementsByTagName('em')[0];
    overlay.style.width = value / 10 + 'em';
    text1.innerHTML = text2.innerHTML = value + '%';
}

<div class = "progressBar">
    <div class = "background">0%</div>
    <div class = "container">
        <div class = "foreground">0%</div>
    </div>
</div>
<button>Play</button>

*:not(button) {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    padding: 10px;
}

.progressBar {
    width: 150px;
    height: 15px;
    border: 1px solid #000;
    position: relative;
    margin-bottom: 5px;
}

.progressBar .background,
.progressBar .foreground {
    width: 150px;
    height: 13px;
    font: normal 10px/13px Sans-Serif;
    text-align: center;
}

.progressBar .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    overflow: hidden;
}

.progressBar .foreground {
    background-color: navy;
    color: yellow;
}

$(function() {
    $("button").click(function() {
        var start = 0;
        var interval = setInterval(function() {
            if(start >= 100) clearInterval(interval);
            $(".progressBar").find(".background, .foreground")
                             .text(start + "%")
                             .end()
                             .find(".container")
                             .css("width", start++ + "%");
        }, 10);    
    });
});