背景色に応じてテキストの色を変更します/色

Question

ここではpageです。最初はdivが暗い画像、2番目が暗い背景として表示されます。

私はサイドバーのテキストの色を暗い画像で明るく、光の上で暗くします。

どのように背景にはdivの色に合わせて設定しますか？ 2つのカラーオプションが必要です。

これは私がhttp://www.acnestudios.com/ たとえば、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> 

それを試すことができます。このプラグインhttp://aerolab.github.io/midnight.js/を使用するのが好きです。これがうまくいきたいです

Answer 2

一つの方法は、background-checkです。 github pageから

：

は自動的に暗く、またはその背後にある画像の明るさに応じて、素子 の軽量バージョンに切り替えます。

• 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

---

：ここ

は、他のいくつかのオプションがあります210

UPDATE

は、このウェブサイト上のサイドバーをチェックアウト：http://provisions.convoy.nyc/

背景画像や色に基づいてテキストのためのクリーン、スムーズな色遷移を。

私はデザイナーと話しました。彼らは使用：http://aerolab.github.io/midnight.js

Answer 3

私はあなたが私はdivのホバー上で試してみました