cambia il colore del testo a seconda dell'immagine/colore di sfondo

Question

su questo page ho il primo div come un'immagine scura e il secondo come sfondo chiaro.

Desidero che il colore del testo della barra laterale sia chiaro sull'immagine scura e scura nella luce.

come impostare il colore in base a ciò che div è in background? ne ho solo bisogno per due opzioni di colore.

Questo è un altro esempio di quello che sto cercando http://www.acnestudios.com/ ad esempio 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

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

ho provato sul div hover. Spero che questo aiuti

Answer 2

Un modo per regolare il colore del testo in base al colore dello sfondo è con background-check.

Dal github page:

Passare automaticamente in una più scura o una versione più leggera di un elemento seconda la luminosità delle immagini dietro di esso.

Qui ci sono alcune altre opzioni:

• 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

Partenza barra laterale su questo sito: http://provisions.convoy.nyc/

Un pulito, transizione di colore uniforme per il testo basato l'immagine di sfondo o il colore su.

Ho parlato con il designer. Usano: http://aerolab.github.io/midnight.js

Answer 3

mi piace usare questo plugin http://aerolab.github.io/midnight.js/ si può provare