javascript 根据背景图像/颜色更改文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32928517/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change text color depending on background image / color
提问by rs19
on this pagei have the first divas a dark image and the second as a light background.
在这个页面上，我将第一个div作为深色图像，第二个作为浅色背景。
i want the sidebar text color to be light on the dark image and dark on the light.
我希望侧边栏文字颜色在深色图像上浅色，在浅色图像上深色。
how would i set the color according to what divis in the background? just need it for two color options.
我将如何根据div背景中的内容设置颜色？只需要它的两种颜色选择。
this is another example of what I'm looking for http://www.acnestudios.com/example html:
这是我正在寻找的另一个示例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>
采纳答案by Bilal Hussain
<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>
I tried on div hover. Hope this helps
我试过 div 悬停。希望这可以帮助
回答by sglazkov
I like use this plugin http://aerolab.github.io/midnight.js/you can try it
我喜欢用这个插件http://aerolab.github.io/midnight.js/你可以试试
回答by Michael Benjamin
One way to adjust the color of text based on the color of the background is with background-check.
根据背景颜色调整文本颜色的一种方法是使用background-check。
From the github page:
Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.
根据元素背后图像的亮度自动切换到更暗或更亮的元素版本。
Here are a few other options:
以下是一些其他选项：
- 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
UPDATE
更新
Check out the sidebar on this website: http://provisions.convoy.nyc/
查看此网站上的侧边栏：http: //provisions.convoy.nyc/
A clean, smooth color transition for the text based on the background image or color.
基于背景图像或颜色的文本干净、平滑的颜色过渡。
I spoke with the designer. They use: http://aerolab.github.io/midnight.js
我和设计师谈过。他们使用：http: //aerolab.github.io/midnight.js
