Geek Answers Handbook

Change text color depending on background image / color

on this page , I have the first div as a dark image, and the second as a light background.

I want the text color of the sidebar to be light in a dark image and dark in light.

how would I set the color according to the div being in the background? It just needs this for two color options.

this is another example of what i am looking for http://www.acnestudios.com/ html example:

  <div id="home_wrapper"> <div id="home_top_t_wrap"> <!-- DARK BACKGROUND --> <h1 class="top_text_h1"> Shop New York Like Never Before </h1> <!-- TEXT THAT NEEDS TO GO FROM LIGHT TO DARK --> </div> <div id="the_market_container"> <!-- LIGHT BACKGROUND --></div> </div>
+6
source share
3 answers
 <div id="home_wrapper"> <div id="home_top_t_wrap"> <!-- DARK BACKGROUND --> <h1 class="top_text_h1"> Shop New York Like Never Before </h1> <!-- TEXT THAT NEEDS TO GO FROM LIGHT TO DARK --> </div> <div id="the_market_container"> <!-- LIGHT BACKGROUND --></div> </div> <script> $(document).ready(function() { $("#home_top_t_wrap").hover(function() { $("body").css("background-color","light"); //change light to your color }); $("#the_market_container").hover(function() { $("body").css("background-color","dark"); //change dark to your color }); }); </script>

I tried to expand the div. Hope this helps

+1
source

I like to use this plugin http://aerolab.imtqy.com/midnight.js/ , you can try it

+4
source

One way to adjust text color based on background color is background-check .

On github page:

Automatically switches to a darker or lighter version of the item depending on the brightness of the images behind it.

Here are a few other options:

UPDATE

Check out the sidebar on this website: http://provisions.convoy.nyc/

A clean, smooth color transition for text based on a background image or color.

I talked to the designer. They use: http://aerolab.imtqy.com/midnight.js

+2
source

More articles:


All Articles