在某些桌面应用程序中，我看到的一种功能是在背景颜色变化时更改文本颜色 -- 从而在单个字符上有效地使用多种颜色。我最常见到的是在显示进度条内部百分比的进度条中使用这种方法。通常会使用较暗的背景颜色作为进度条颜色，随着进度条的增加，暗色与黑色文本之间的对比度不足，因此当进度条与文本重叠时，文本颜色会立即更改。下面的图片可以解释我的意思：
正如您所看到的，在0％时，文本是黑色--当没有深色背景时。当背景图像完全进展到100％时，文本是完全白色的。但在中间，例如在50％处，文本是一半黑色/一半白色的，并且实际上在这个示例中是在“0”字符上分割的。
是否有任何方法可以在网页上完成这个效果？CSS、图片、Jquery或其他方式都可以。（最好不要使用Flash或Java小程序，而是想知道是否可能存在基于HTML的解决方案。）谢谢！
我给你一个起点:
div），将它们的大小设置为在100%时它们的全宽度。div中，并在每个百分比增加时增加父元素的宽度。将父元素的位置设置在黑/白条的上方。这将模拟相同的效果，而不必手动绘制一半的字符。这在CSS中会很困难，因为您必须将一个覆盖在另一个上面。
这种方法的好处是您可以轻松地显示半绘制的字符。已经有一个jQuery进度条可以使用，但是。
这实际上非常有趣。这是你的进度条。在我测试过的IE5.5+和Safari 5浏览器中运行良好。
使用系统颜色。 :D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Progress</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.progressbar, .progressbar strong {
display:block;
height:1.2em
}
.progressbar, .progressbar em {
width:10em
}
.progressbar strong, .progressbar em {
position:absolute;
top:0;
left:0
}
.progressbar {
font:status-bar;
color:windowtext;
background:window;
border:1px solid windowframe;
text-align:center;
position:relative
}
.progressbar strong {
background:highlight;
width:0;
font-weight:normal;
overflow:hidden
}
.progressbar em {
color:highlighttext;
font-style:normal
}
</style>
<script type="text/javascript">
function progress(bar) {
var text1 = bar.getElementsByTagName('span')[0];
var overlay = bar.getElementsByTagName('strong')[0];
var text2 = bar.getElementsByTagName('em')[0];
var value = parseInt(bar.getAttribute('progress'), 10);
value += 1;
overlay.style.width = value / 10 + 'em';
text1.innerHTML = text2.innerHTML = value + '%';
bar.setAttribute('progress', value);
if (value < 100)
setTimeout(function() { progress(bar) }, 20);
}
window.onload = function() {
var span = document.getElementsByTagName('span');
for (var i = 0; i < span.length; i++) {
if (span[i].className == 'progressbar') {
span[i].setAttribute('progress', 0);
var el1 = document.createElement('span');
el1.innerHTML = '0%';
span[i].appendChild(el1);
el1 = document.createElement('strong');
var el2 = document.createElement('em');
el2.innerHTML = '0%';
el1.appendChild(el2);
span[i].appendChild(el1);
progress(span[i]);
}
}
}
</script>
</head>
<body>
<p><span class="progressbar"></span></p>
</body>
</html>
setAttribute将值分配给进度条，使用自定义属性名称。
上面的示例只是一个虚拟进度条，因为它使用计时器来增加值。要进行真正的进度，您需要稍微修改脚本。您可以更改函数progress，使其将值添加到当前值中，或者可以使其设置该值。第二种方法可能是您想要使用的。
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 + '%';
}
如果确保传递给函数的值在0到100之间，您可以省略value = value > 100 ? 100 : value < 0 ? 0 : value。
编辑：
我把innerText改成了innerHTML，这样它就可以在Firefox中工作了。我之前不知道这一点。我还在CSS中将display:inline-block改成了display:block。我知道这样做会使进度条无法内联显示，但这样可以在Netscape 9中工作。
<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;
}
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);
});
});
overflow: hidden。 - bobince