thay đổi màu văn bản tùy thuộc vào hình nền/màu

Question

trên số page tôi có hình ảnh tối màu div đầu tiên và hình ảnh thứ hai làm nền sáng.

tôi muốn màu văn bản thanh bên phải sáng trên hình ảnh tối và tối trên ánh sáng.

làm cách nào để đặt màu theo những gì div ở chế độ nền? chỉ cần nó cho hai lựa chọn màu sắc.

đây là một ví dụ về những gì tôi đang tìm kiếm http://www.acnestudios.com/ dụ 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> 

tôi đã cố gắng trên div di chuột. Hy vọng điều này sẽ giúp

Answer 2

Một cách để điều chỉnh màu sắc của văn bản dựa trên màu sắc của nền là với background-check.

Từ github page:

Tự động chuyển sang tối hoặc một phiên bản nhẹ hơn của một phần tử tùy thuộc vào độ sáng của hình ảnh đằng sau nó.

Dưới đây là một vài lựa chọn khác:

• 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

---

CẬP NHẬT

Kiểm tra các sidebar trên trang web này: http://provisions.convoy.nyc/

Một sạch, chuyển màu mượt mà cho các văn bản dựa trên hình nền hoặc màu sắc.

Tôi đã nói chuyện với nhà thiết kế. Họ sử dụng: http://aerolab.github.io/midnight.js

Answer 3

Tôi thích sử dụng plugin này http://aerolab.github.io/midnight.js/ bạn có thể thử nó