html - 有什么办法可以通过网页上的字符来改变文本 "halfway"的颜色吗？

Question

我在某些桌面应用程序中看到的一件事是能够随着背景的变化而改变文本的颜色——有效地在单个字符上使用多种颜色。我最常看到进度条显示进度条内的百分比。一般情况下，进度条的颜色会使用较深的背景色，随着进度条的进行，深色与深色文本的对比度不够，所以进度条一与文本重叠，文本颜色就会发生变化。这张图片应该可以解释我的意思:

如您所见，文本在 0% 时是黑色的——此时没有深色背景。当背景图像完全进展到 100% 时，文本完全是白色的。但在中间，正如您在 50% 时看到的那样，文本是一半黑色/一半白色，在本例中它实际上是在“0”字符处拆分的。

有没有办法在网页上做到这一点？ CSS、图像、Jquery，否则？ (不过最好不要使用 Flash 或 Java 小程序——我真的很想知道是否可以使用基于 HTML 的解决方案。)谢谢!

Answer 1

我会让你开始:

1. 创建两个大小相同的“进度条”(div)。将它们的大小设置为它们在 100% 时的全宽。
2. 按照上面的示例，将一个条设置为白色背景的黑色文本，将另一个设置为蓝色背景的黄色文本。
3. 在父级 div 中设置黄色/蓝色条，并在每个百分比增加时增加父级的宽度。将父级放置在黑/白条上方。
4. 同样在每次增加时，更新两个进度条的标签以表示百分比。

这将模拟相同的效果，而无需手动绘制半个字符。这在 CSS 中会很困难，因为您必须将一个放在另一个上。

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