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

Question

Like in this image

As the text crosses over from one div (white-space:nowrap), is it possible to change the text color using CSS, or if not CSS, then JavaScript/jQuery?

I'm sure it's possible, but you shouldn't do it - it'll confuse people if the colour of the label changes part way through. Just pick a colour that correctly contrasts with _both_ background colours! — Alnitak, Jan 11 '12 at 14:03
There is a [cool solution by tomatentobi](http://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color/16981820#16981820) using pseudo elements. There you don't have to insert the text twice and also the padding works perfectly. — Sebastian Templin, Dec 24 '15 at 23:05

score 39 · Accepted Answer · edited Dec 11 '19 at 14:03

39

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:

Inside the DIV bar (overflow: hidden;), it would be white (on top)
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)_|__________|

<div style="position: relative; width: 250px; background: white; border: 1px solid #000; color: #000;">
<div style="position: absolute; z-index: 10; overflow: hidden; width: 105px; background-color: navy; white-space:nowrap; color: #FFF;">
    Between 4:00 and 6:00 blah blah
</div>
    Between 4:00 and 6:00 blah blah
</div>

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.

edited Dec 11 '19 at 14:03

Rob

14,746
28
47
65

answered Jan 11 '12 at 13:59

Jakub

20,418
8
65
92

1

@Anupam, its crude, but proof-of-concept that you just need simple CSS to achieve this, you of course don't want to use inline styles like I did. – Jakub Jan 11 '12 at 14:35
Any ideas for doing something similar with right aligned text? – Travis Collins Jan 14 '12 at 01:00
@TravisCollins, umm just change the alightment of the text, and the overlay (blue) div.. its nothing different than this example, just from the right side. – Jakub Jan 14 '12 at 01:07
I disagree, your jsfiddle example relies on left aligned text, at least if your progress bar is still coming from the left. This was the closest I got with right aligned text, but it doesn't work in IE7. http://jsfiddle.net/e7tAm/1/ – Travis Collins Jan 14 '12 at 01:12
As much of a hack as this is, what with the duplicated text, this is really clever. – Wesley Murch Dec 05 '12 at 16:37
1

Nice idea, but you could have added the necessary code to the question. – Artjom B. Jun 11 '14 at 13:07
Amazing that you did this just with html and css – Chillin' Dec 11 '19 at 14:00

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

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

With jQuery/JavaScript you can check if an element has a CSS rule applied to it, 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 the element has certain css class/style

edited May 23 '17 at 12:18

Community

1
1

answered Jan 11 '12 at 13:40

Simone

20,302
14
79
103

thanks Simone, javascript is good can you give me some example or something, I searched a lot, don't have any idea what I should search for, so didn't have any useful results!! – Anupam Jan 11 '12 at 13:43

score 0 · Answer 3 · answered Jan 11 '12 at 13:44

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.

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

I think the text is all one element in this case. – Samuel Edwin Ward Jan 11 '12 at 14:09 — Samuel Edwin Ward, Jan 11 '12 at 14:09

score 0 · Answer 4 · edited Aug 22 '19 at 13:27

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

Calculate the width of the overlap in pixels. ie width = ${"#container"}.width() - ${"#progressbar"}.width();
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
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.

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

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

4 Answers4

Linked