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

【问题标题】：change text color depending on background image / color根据背景图像/颜色更改文本颜色
【发布时间】：2015-12-31 22:10:45
【问题描述】：

在这个page 上，我将第一个div 作为深色图像，将第二个作为浅色背景。

我希望侧边栏文本颜色在深色图像上为浅色，在浅色时为深色。

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

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

【问题讨论】：

要回答这个问题，您实际上需要展示足够多的 HTML 和 CSS，以便我们重现您的问题。指向您的页面的链接是不够的，因为一旦您的问题得到解决，该页面就会被更改，从而使该问题对网站的未来访问者无用或无意义。
Change text color based on brightness of the covered background area?的可能重复

标签： javascript jquery html css

【解决方案1】：

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

【讨论】：

感谢您。我认为它比我需要的更复杂，而且它弄乱了我的所有定位，因为它正在切换到固定。当您滚动时，此站点完全符合我的要求。有任何想法吗？ acnestudios.com
别无他法，更好的解决方案，这里有一个例子aerolab.github.io/subtle-animations
您可以尝试“混合混合模式：差异；”但IE不支持

【解决方案2】：

根据背景颜色调整文本颜色的一种方法是使用background-check。

来自github page：

自动切换到较暗或较亮的元素版本取决于它背后图像的亮度。

这里有一些其他选项：

更新

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

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

我与设计师进行了交谈。他们使用：http://aerolab.github.io/midnight.js

【讨论】：

谢谢。仍然没有找到它。当您滚动时，此站点完全符合我的要求。有任何想法吗？ acnestudios.com
我找到了一个完全符合您要求的网站。与设计师交谈。我修改了我的答案以包括他们使用的解决方案。

【解决方案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 悬停。希望这会有所帮助

【讨论】：