有没有办法改变文字颜色“中途"?通过网页上的字符? [英] Is there any way to change the color of text "halfway" through a character on a webpage?

问题描述

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

One thing I've seen in some Desktop applications is the ability to change the color of text as the background changes -- to effectively have multiple colors on a single character. I've seen this most commonly with progress bars that display the percentage inside the bar. Generally a darker background color will be used as the progress bar color, and as it progresses, the dark color doesn't contrast enough with the dark text, so the text color changes as soon as the bar overlaps with the text. This image should explain what I mean:

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

As you can see, the text is black when it's at 0% -- when there is no dark background. When the background image fully progresses to 100%, the text is completely white. But in the middle, as you can see at 50%, the text is half black/half white, and it's actually split on the "0" character in this example.

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

Is there any way to do this at all on a webpage? CSS, Images, Jquery, otherwise? (Preferably not Flash or a Java applet though -- I'm really wondering whether an HTML-based solution is possible.) Thanks!

推荐答案

我会让你开始:

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

1. Create two equally sized "progress bars" (divs). Set their size to the full width they would be if they were at 100%.
2. Set one bar to black text with a white background and the other to yellow text with a blue background, as per your example above.
3. Set the yellow/blue bar in a parent div and increase the width of the parent on every percentage increase. Position the parent above the black/white bar.
4. Also on every increase, update the labels of both progress bars to represent the percentage.

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

That will simulate the same effect without having to manually paint half a character. It will be difficult in CSS because you will have to position one over the other.

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

The benefit of doing it this way is that you can easily display half-painted characters. There is already a jQuery progress bar you can use, though.

这篇关于有没有办法改变文字颜色“中途"?通过网页上的字符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！