是否可以使用css根据背景色改变文本颜色?

Is it possible to change text color based on background color using css?

是否可以使用css根据背景色改变文本颜色?

Like in the this image

就像这幅图

As the text crosses over from one div (white-space:nowrap) is it possible to change the text color using css or jquery/javascript?

当文本从一个div(空格:nowrap)中穿过时，是否可以使用css或jquery/javascript更改文本颜色?

Thanks

谢谢

5 个解决方案

#1

Here is my solution (thinking it through a different way):

这是我的解决方案(用另一种方式思考):

Use a DIV with overflow: hidden; for the navy 'bar' that shows the rating scale. You then write out two sets of TEXT:

使用带有溢出的DIV:隐藏;用于显示等级的海军“bar”。然后写出两组文本:

1. Inside the DIV bar (overflow: hidden;), it would be white (on top)
2. 在DIV bar内部(溢出:隐藏;)，它将是白色的(在顶部)
3. In the underlying DIV container, it would be black. (container)
4. 在底层的DIV容器中，它将是黑色的。(容器)

The result would be an overlap of the two colored text divs:

结果将是两个彩色文本div的重叠:

 ________________________________
|          1          |    2     |
|_(dark blue w white)_|__________|

Here is my jsFiddle

这是我jsFiddle

It works great because it will 'cut through' letters if the bar is at that width. Check it out, I think its what you are looking for.

它工作得很好，因为它将“切割”字母，如果条形在那个宽度。看看，我想这就是你要找的。

#2

While the accepted solution is probably easiest for this exact case, I have written a more thorough jQuery plugin that does exactly what you need (and a bit more).

虽然所接受的解决方案对于这种情况来说可能是最简单的，但我已经编写了一个更全面的jQuery插件，它完全满足您的需要(以及更多)。

Repo: https://github.com/salsita/jq-clipthru
Blog: https://blog.javascripting.com/2014/06/11/changing-text-color-based-on-background-color/

回购:https://github.com/salsita/jq-clipthru博客:https://blog.javascripting.com/2014/06/11/changing-text-color-based-on-background-color/

In short, it dynamically creates clones of an element with different CSS classes and clips their visible content using raw CSS clip to match the overlap. If you use it, please mind that CSS clip only works on position: absolute or position: fixed elements, so you'll have to position your text that way (which shouldn't really be a problem in your case as I see it).

简而言之，它动态地创建具有不同CSS类的元素的克隆，并使用原始CSS剪辑来剪辑它们的可见内容，以匹配重叠。如果你使用它，请注意CSS剪辑只在位置上工作:绝对或位置:固定的元素，所以你必须将你的文本放置在那个位置(这在我看来不是问题)。

#3

Yes that's possible.

是的,这是可能的。

You can tie a background and a foreground color together into a class and use that on your text. So you got for example one style class having black text white background and one having white text and black background. You can switch that class then and the text will change with the background color.

您可以将背景和前景颜色绑定到一个类中，并在文本中使用。例如，一个样式类有黑色文本白色背景，一个有白色文本和黑色背景。然后可以切换类，文本将随背景颜色而改变。

And you can use jQuery('body').css('color', '#fff') for example to change the color of the body text to white.

您可以使用jQuery('body')。例如，将正文文本的颜色改为白色。

If you provide some sample code it would even be possible to create a more specific answer for your question.

如果您提供了一些示例代码，您甚至可以为您的问题创建一个更具体的答案。

#4

No, you can't do it with just CSS. You need JavaScript for this.

不，仅仅用CSS是不行的。为此需要JavaScript。

With jQuery/JavaScript you can check if an element has a CSS rule applied to it, and then do what you want, i.e.

使用jQuery/JavaScript，您可以检查一个元素是否应用了CSS规则，然后执行所需的操作，例如。

if ( $('#element').css('white-space') == 'nowrap' ) {
     // do something
} else {
     // do something else
}

Also read here: Jquery: How to check if the element has certain css class/style

也可以在这里阅读:Jquery:如何检查元素是否具有某种css类/样式

#5

Indeed, you need to use javascript. I would approach the problem by doing something like this:

实际上，您需要使用javascript。我会这样处理这个问题:

1. Calculate the width of the overlap in pixels. ie width = ${"#container"}.width() - ${"#progressbar"}.width();

   计算重叠的宽度(以像素为单位)。即宽度= $ {“#容器”} .width()- $ {“# progressbar”} .width();

2. Calculate the amount of text you have to highlight, you can use follow this discussion. I would start with an empty string, check its width and if it's lower than the width calculated above add one character and repeat. Once it's higher choose that string

   计算要突出显示的文本数量，您可以按照下面的讨论来使用。我将从一个空字符串开始，检查它的宽度，如果小于上面计算的宽度，添加一个字符并重复。一旦它更高，选择那个字符串

3. Insert the above string between spans, like this ${"#container"}.html("<span class='highlight'>"+highlitedText+"</span>"+restOfTheText); Obviously highlitedText is a string containing the characters in 2. and restOfTheText is a string with the rest of the characters.

   在span之间插入上面的字符串，比如这个${“#container”}。html(“ <跨类=“亮点”> ”+ highlitedText + " < / span > + restOfTheText);显然，highlitedText是包含两个字符的字符串。restOfTheText是一个包含其余字符的字符串。

Good thing of this method is that you can rerun it if you change the width of your progressbar div.

这个方法的好处是，如果你改变了progressbar分区的宽度，你就可以重新运行它。

Hope that helps!

希望会有帮助!