change text color depending on background image / color

Question

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

i want the sidebar text color to be light on the dark image and dark on the light.

how would i set the color according to what div is in the background? just need it for two color options.

this is another example of what I'm looking for http://www.acnestudios.com/ example html:

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

Answer 1

我喜欢使用这个插件http://aerolab.github.io/midnight.js/你可以尝试一下

Answer 2

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

From the github page :

Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.

Here are a few other options:

• Is it possible to change text color based on background color using css?
• Change text color based on brightness of the covered background area?
• Dynamically adjust text color based on background image
• Invert CSS font-color depending on background-color

---

UPDATE

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

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

I spoke with the designer. They use: http://aerolab.github.io/midnight.js

Answer 3

<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 on div hover. Hope this helps