Is it possible to change the text color depending on the background color using CSS?

Question

Is it possible to change the text color depending on the background color using CSS?

As in this image

Since the text intersects a single div ( white-space:nowrap ), is it possible to change the color of the text using CSS or, if not CSS, then JavaScript / jQuery?

Answer 1

Here is my solution (thinking of it differently):

Use DIV with overflow: hidden; for the "bar" of the navy, which shows a rating scale. Then write out two sets of TEXT:

• Inside the DIV panel (overflow: hidden;) it will be white (top)
• In the base DIV container, it will be black. (Container)

The result will be the overlap of two colored text divs:

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

Here is my jsFiddle

It works great because it will “cut through” the letters if the strip is at that width. Check it out, I think this is what you are looking for.

Answer 2

No, you cannot do this with CSS only. You need JavaScript to do this.

With jQuery / JavaScript, you can check if the CSS rule is applied to the element and then do what you want, i.e.

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

Also read here: jQuery: how to check if an element has a specific css class / style

Answer 3

Yes it is possible.

You can link the background and foreground color together in the class and use it in your text. Thus, you get, for example, one style class with black text on a white background and one with white text and a black background. You can switch this class 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 main text to white.

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

Answer 4

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

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

2. Count the amount of text that you should highlight, you can use follow this discussion . I would start with an empty string, check its width and, if it is less than the width calculated above, add one character and repeat. Once it gets higher, select this line

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

A good feature of this method is that you can re-run it if you change the width of your progress bar div.

Answer 5

Although the decision made is probably the easiest for this exact case, I wrote a more detailed jQuery plugin that does exactly what you need (and a bit more).

Repo: https://github.com/salsita/jq-clipthru
Blog: 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 fastens their visible content using an unprocessed CSS clip to match the overlap. If you use it, note that the CSS clip only works with position: absolute or position: fixed elements, so you have to place the text this way (which should not be a problem in your case, as I see).