根据背景图像/颜色更改文本颜色

Question

在这个页面上，我有第一个div作为暗图像，第二个作为浅色背景。

我希望侧边栏文字颜色在暗图像上亮，在灯光上暗。

我将如何根据背景中的div设置颜色？ 只需要两种颜色选择。

这是我正在寻找的另一个例子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>

Answer 1

我喜欢使用这个插件http://aerolab.github.io/midnight.js/你可以尝试一下

Answer 2

根据背景颜色调整文本颜色的一种方法是使用背景检查 。

从github页面 ：

根据背后图像的亮度自动切换到较暗或较亮的元素版本。

以下是一些其他选项：

• 是否可以使用css根据背景颜色更改文本颜色？
• 根据覆盖的背景区域的亮度更改文本颜色？
• 根据背景图像动态调整文本颜色
• 根据背景颜色反转CSS字体颜色

---

UPDATE

查看本网站的侧栏： http ： //provisions.convoy.nyc/

基于背景图像或颜色的文本的干净，平滑的颜色过渡。

我和设计师谈过。 他们使用： http ： //aerolab.github.io/midnight.js

Answer 3

<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>

我尝试了div悬停。 希望这可以帮助