基于对涵盖背景区域的亮度变化文本颜色？ [英] Change text color based on brightness of the covered background area?

问题描述

我已经想过了一会儿以下了，所以现在我想知道你的意见，可能的解决方案，等等。

我要寻找一个插件或技术，将文字的颜色或取决于它的覆盖像素的平均亮度predefined图像/图标之间切换的父的背景图像或-color。

如果它的覆盖的区域的背景是相当黑暗，使文本白色或切换图标。

此外，这将会是巨大的，如果如果家长没有定义背景色或-image脚本会注意到，然后继续寻找最最近的（从父元素到它的父元素..）。

你觉得，知道这个想法？是否有类似的东西在那里了吗？脚本的例子吗？

干杯，J。

解决方案

对于这个有趣的资源：

• W3C


• THIS

下面是W3C的算法（的jsfiddle演示过）：

\r

\r

VAR RGB = [255，0，0];\r
\r
的setInterval（函数（）{\r
  变种C ='RGB（+ RGB [0] +'，'+ RGB [1] +'，'+ RGB [2] +'）';\r
  变种O = Math.round（（（parseInt函数（RGB [0]）* 299）+（parseInt函数（RGB [1]）* 587）+（parseInt函数（RGB [2]）* 114））/ 1000）;\r
  （O＆GT; 125）？ $（'＃BG），CSS（'色'，'黑'）：$（'＃BG），CSS（'色'，'白'）; //http://www.w3.org/TR/AERT#color-contrast\r
  $（'＃BG），CSS（背景颜色，C）。\r
  RGB [0] = Math.round（的Math.random（）* 255）;\r
  RGB [1] = Math.round（的Math.random（）* 255）;\r
  RGB [2] = Math.round（的Math.random（）* 255）;\r
}，1000）;

\r

#bg {\r
  宽度：200像素;\r
  高度：50像素;\r
}

\r

＆LT; D​​IV ID =BG＆gt;文字例＆LT; / DIV＆GT;

\r

\r

\r

I've thought about the following for a while already, so now I want to know your opinions, possible solutions, and so on.

I am looking for a plugin or technique that changes a text's color or switches between predefined images/icons depending on the average brightness of the covered pixels of it's parent's background-image or -color.

If the covered area of it's background is rather dark, make the text white or switch the icons.

Additionally, it'd be great if the script would notice if the parent has no defined background-color or -image and then continue to search for the most nearest (from parent element to it's parent element..).

What do you think, know about this idea? Is there something similar out there already? script-examples?

Cheers, J.

解决方案

Interesting resources for this:

• W3C
• THIS

Here's the W3C algorithm (with JSFiddle demo too):

var rgb = [255, 0, 0];

setInterval(function() {
  var c = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  var o = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) / 1000);
  (o > 125) ? $('#bg').css('color', 'black'): $('#bg').css('color', 'white'); //http://www.w3.org/TR/AERT#color-contrast
  $('#bg').css('background-color', c);
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);
}, 1000);

#bg {
  width: 200px;
  height: 50px;
}

<div id="bg">TEXT EXAMPLE</div>

这篇关于基于对涵盖背景区域的亮度变化文本颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！