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

Posted 2023-03-06

【中文标题】根据背景图像/颜色更改文本颜色

【英文标题】：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?的可能重复

【参考方案1】：

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

【讨论】：

感谢您。我认为它比我需要的更复杂，而且它弄乱了我的所有定位，因为它正在切换到固定。当您滚动时，此站点完全符合我的要求。有任何想法吗？ acnestudios.com

别无他法，更好的解决方案，这里有一个例子aerolab.github.io/subtle-animations

您可以尝试“混合混合模式：差异；”但IE不支持

【参考方案2】：

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

来自github page：

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

这里有一些其他选项：

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

---

更新

查看本网站的侧边栏：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 悬停。希望这会有所帮助