changer la couleur du texte en fonction de l'image de fond / couleur

sur ce page j'ai le premier div comme une image sombre et le second comme un fond clair.

je veux que la barre latérale de la couleur du texte pour être la lumière sur l'obscurité de l'image et de l'obscurité à la lumière.

comment pourrais-je définir la couleur en fonction de ce que div est dans le fond? juste besoin de deux options de couleur.

c'est un autre exemple de ce que je suis à la recherche d' http://www.acnestudios.com/
exemple de code 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>
  • Pour répondre à cette question, vous avez réellement besoin de montrer assez de votre code HTML et CSS afin de nous permettre de recréer votre problème. Un lien vers votre page n'est pas suffisant, parce que dès que votre problème est résolu que la page sera modifiée rendu la question inutile ou absurde pour les futurs visiteurs du site.
  • Double Possible de Changer la couleur du texte en fonction de la luminosité de l'arrière-plan?
InformationsquelleAutor rs19 | 2015-10-03
  1. 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>

    J'ai essayé sur les div en vol stationnaire. Espérons que cela aide

    InformationsquelleAutor Bilal Hussain
  2. 4

    J'aime utiliser ce plugin http://aerolab.github.io/midnight.js/ vous pouvez essayer

    • merci pour cette. je pense que c'est plus compliqué que j'ai besoin et il gâcher tous mes positionnement parce que c'est la commutation fixe. ce site est exactement ce que je veux lorsque vous faites défiler. des idées? acnestudios.com
    • pas d'autre moyen, il une meilleure solution, avoir un exemple ici aerolab.github.io/subtil-animations
    • vous pouvez expérimenter avec "mix-blend-mode: différence", mais c'est à dire pas le soutenir
    InformationsquelleAutor sglazkov
  3. 3

    Une façon de régler la couleur du texte en fonction de la couleur de l'arrière-plan est avec background-case.

    De la page github:

    Basculer automatiquement vers un plus sombre ou une version plus légère d'un élément
    en fonction de la luminosité des images derrière elle.

    Voici quelques autres options:

    Mise à JOUR

    Consultez l'encadré sur ce site: http://provisions.convoy.nyc/

    Propre, lisse de transition de couleur pour le texte en se basant sur l'image de fond ou la couleur.

    J'ai parlé avec le concepteur. Ils utilisent: http://aerolab.github.io/midnight.js

    • merci. n'ai pas encore trouvé. ce site est exactement ce que je veux lorsque vous faites défiler. des idées? acnestudios.com
    • J'ai trouvé un site qui fait exactement ce que vous voulez. Parlé avec le concepteur. J'ai révisé ma réponse à inclure la solution qu'ils utilisent.
    InformationsquelleAutor Michael_B