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

Question

在这个页面上，我将第一个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>

- rs19

---

为了回答这个问题，你需要展示足够的HTML和CSS来让我们重现你的问题。仅提供页面链接是不够的，因为一旦问题解决，该页面会发生变化，从而使问题对未来访问者无用或毫无意义。 - David Thomas

可能是根据覆盖背景区域的亮度更改文本颜色？的重复问题。 - KyleMit

Answer 1

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

- sglazkov

---

谢谢。我认为这比我需要的更复杂，而且它会破坏我的所有定位，因为它会切换到固定模式。当你滚动时，这个网站正好做到了我想要的。有什么想法吗？http://www.acnestudios.com/ - rs19

请看这里的示例：http://aerolab.github.io/subtle-animations/。没有其他更好的解决方案。 - sglazkov

您可以尝试使用“mix-blend-mode: difference;”属性，但IE浏览器不支持该属性。 - sglazkov

Answer 2

用 background-check 可以根据背景颜色自动调整文本颜色。

从github页面来看：

自动切换到元素的较暗或较亮版本，具体取决于其后面的图像的亮度。

以下是其他几个选项：

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

---

更新

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

基于背景图像或颜色，实现文本的清晰，平滑的颜色过渡。

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

- Michael Benjamin

---

谢谢。我还没找到它。当你滚动时，这个网站恰好做到了我想要的一切。有什么想法吗？http://www.acnestudios.com/ - rs19

我找到了一个网站，它正好做你想要的事情。我和设计师交谈过了。我修改了我的答案，包括他们使用的解决方案。 - Michael Benjamin

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的hover效果。希望这有所帮助。

- Bilal Hussain