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

Question

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

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?

Answer 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:

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)_|__________|

<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.