2015-10-03 44 views
6

ここでは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> 
+2

この質問に答えるには、問題を再現できるようにHTMLとCSSを十分に表示する必要があります。あなたのページへのリンクでは不十分です。なぜなら、問題が解決されるとすぐに、そのページが変更され、将来のビジターに無意味で無意味なものとなるからです。 –

+0

[適用される背景領域の明るさに基づいてテキストの色を変更しますか?](http://stackoverflow.com/questions/11867545/change-text-color-based-on-brightness-of-the-covered-background -area) – KyleMit

答えて

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/を使用するのが好きです。これがうまくいきたいです

2

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

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


:ここ

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

UPDATE

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

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

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

+0

ありがとうございます。まだそれを見つけていない。このサイトはスクロールするときに私が望むものとまったく同じです。何か案は? http://www.acnestudios.com/ – rs19

+0

私はあなたが望むものを正確に行うウェブサイトを見つけました。デザイナーと話してください。彼らが使用するソリューションを含める答えを改訂しました。このために –

4

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

+0

ありがとうございます。私はそれが私が必要とするより複雑で、それが固定に切り替わっているので、私のポジショニングのすべてを台無しにしていると思う。このサイトはスクロールするときに私が望むものとまったく同じです。何か案は? http://www.acnestudios.com/ – rs19

+1

これ以外の方法はありません。ここでは例を挙げています。http://aerolab.github.io/subtle-animations/ – sglazkov

+0

「mix-blend-mode:difference ; "しかし、IEはそれをサポートしていません – sglazkov

関連する問題