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>

To answer this question, you realistically need to show enough of your HTML and CSS to allow us to recreate your problem. A link to your page is not sufficient, because as soon as your problem is solved that page will be changed rendering the question useless or nonsensical to future visitors to the site. — David Thomas, Oct 04 '15 at 04:52
Possible duplicate of [Change text color based on brightness of the covered background area?](http://stackoverflow.com/questions/11867545/change-text-color-based-on-brightness-of-the-covered-background-area) — KyleMit, May 01 '17 at 14:05

score 5 · Answer 1 · answered Oct 04 '15 at 00:03

5

I like use this plugin http://aerolab.github.io/midnight.js/ you can try it

answered Oct 04 '15 at 00:03

sglazkov

1,046
1
10
38

thanks for this. i think it's more complicated than i need and it messing up all of my positioning because it's switching to fixed. this site does exactly what i want when you scroll. any ideas? http://www.acnestudios.com/ – rs19 Oct 04 '15 at 03:35
1

no other way, it better solution, have a example here http://aerolab.github.io/subtle-animations/ – sglazkov Oct 04 '15 at 09:22
you can experiment with "mix-blend-mode: difference;" but IE not support it – sglazkov Oct 04 '15 at 13:46

score 3 · Answer 2 · edited May 23 '17 at 11:33

3

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:

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

edited May 23 '17 at 11:33

Community

1
1

answered Oct 03 '15 at 23:56

Michael Benjamin

346,931
104
581
701

thanks. still haven't found it. this site does exactly what i want when you scroll. any ideas? http://www.acnestudios.com/ – rs19 Oct 04 '15 at 03:36
I found a website that does exactly what you want. Spoke with the designer. I revised my answer to include the solution they use. – Michael Benjamin Oct 08 '15 at 13:19

score 1 · Accepted Answer · answered Oct 08 '15 at 13:28

<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

change text color depending on background image / color

3 Answers3