有没有办法通过网页上的angular色来改变文字“中途”的颜色？
我在某些桌面应用程序中看到的一件事是，在背景更改时更改文本颜色的能力 – 可以在单个字符上有效地显示多种颜色。 我最常见到的进度条显示栏内的百分比。 一般来说，较深的背景颜色将被用作进度条的颜色，随着进度的进行，深色与黑色文本的对比度不够，所以文字的颜色会随着文本的重叠而改变。 这张图片应该解释我的意思：
正如您所看到的，文本在0％时是黑色的 – 当没有深色背景时。 当背景图像完全进展到100％时，文本是完全白色的。 但在中间，正如你可以看到的50％，文本是半黑/半白，在本例中它实际上是分割为“0”字符。
在网页上有没有办法做到这一点？ CSS，图像，JQuery，否则？ （最好不是Flash或一个Java小程序，但我真的想知道是否可以使用基于HTML的解决scheme。）谢谢！
我会让你开始：
- 创build两个大小相同的“进度条”（
div）。 将它们的大小设置为它们在100％时的全部宽度。 - 按照上面的示例，将一个栏设置为带有白色背景的黑色文本，将另一栏设置为带有蓝色背景的黄色文本。
- 在父
div设置黄色/蓝色条，并在每增加一个百分比增加父级的宽度。 将父母放置在黑色/白色栏上方 。 - 同时每增加一次，更新两个进度条的标签以表示百分比。
这将模拟相同的效果，而不必手animation半个字符。 在CSS中将会很困难，因为你必须把一个放在另一个之上 。
这样做的好处是，你可以很容易地显示半画字符 。 不过，已经有了一个可以使用的jQuery进度条。
其实这真的很有趣。 这是你的进度条。 在IE5.5 +和Safari 5（我testing过的浏览器）中工作正常。
使用系统颜色。 ：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 + '%'; }
你可以忽略value = value > 100 ? 100 : value < 0 ? 0 : value value = value > 100 ? 100 : value < 0 ? 0 : value value = value > 100 ? 100 : value < 0 ? 0 : value如果确保传递给函数的值介于0和100之间，则为值。
在这里testing
编辑：
我将innerText更改为innerHTML以便它可以在Firefox中使用。 我没有意识到这一点。 我也改变了CSS display:inline-block display:block 。 我知道这种方式，你不能再有内联进度条，但这使得它在Netscape 9中工作。
这是另一个实现： http : //jsfiddle.net/3rcav4s4/ 。
HTML：
<div class = "progressBar"> <div class = "background">0%</div> <div class = "container"> <div class = "foreground">0%</div> </div> </div> <button>Play</button>
CSS：
*: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); }); });
