Menu
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?
454
With the difference blend mode we have to set the text element's color value to the opposite of the background. So if our background is rgb(0, 0, 0) we'll need to set the text pseudo element to rgb(255, 255, 255) . I think this little demo helps us recognise how useful the mix-blend-mode property can be.
Changing Text Background Color in CSS. To change the background color of the inline text, go to the <head> section. Simply add the appropriate CSS selector and define the color and background-color property with the values you want.
Contrast with a White Background. Black text on a white background provides maximal value contrast and, therefore, optimal readability for body text. Black text on a white background provides maximal value contrast and, therefore, optimal readability for body text.
Text Color a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)"
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:
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.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
