是否可以使用css根据背景颜色更改文本颜色？ [英] Is it possible to change text color based on background color using css?

问题描述

是否可以使用css根据背景颜色更改文字颜色？

像这张图片一样

当文本跨越一个div（white-space：nowrap）时，是否可以使用css或jquery / javascript更改文本颜色？

感谢

解决方案

这里是我的解决方案（通过不同的方式思考）：

对于显示评级尺度的海军棒，使用 overflow：hidden; 的DIV。
然后你写出两套TEXT：

1. 在DIV栏里面（overflow：hidden; （顶部）


2. 在底层DIV容器中，它将是黑色的。 （container）

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

  ________________________________ 
 | 1 | 2 | 
 | _（深蓝色w白色）_ | __________ | 
  

以下是我的 jsFiddle

它的效果非常好，因为如果条形图的宽度足够，它会切入字母。看看，我想它是你要找的。

Is it possible to change text color based on background color using 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?

Thanks

解决方案

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:

1. Inside the DIV bar (overflow: hidden;), it would be white (on top)
2. In the underlying DIV container, it would be black. (container)

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

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

Here is my 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.

这篇关于是否可以使用css根据背景颜色更改文本颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！