有任何方法来改变文本的颜色“半途”通过网页上的字符？ [英] 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，Images，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. 创建两个大小相同的进度条（ div s）。


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屋！