Question

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

Answer 1

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

Answer 2

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

来自github page：

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

以下是其他一些选项：

更新

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

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

3 个答案: