javascript – 根据覆盖的背景区域的亮度更改文字颜色?

我已经思考了一段时间了,所以现在我想知道你的意见,可能的解决方案等等。

我正在寻找一个插件或技术,更改文本的颜色或在预定义的图像/图标之间切换,取决于它的父的背景图像或颜色的覆盖像素的平均亮度。

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

此外,如果脚本会注意到父级没有定义背景颜色或图像,然后继续搜索最近的(从父元素到它的父元素..),这将是巨大的。

你认为什么,知道这个想法?有没有类似的东西已经有?脚本示例?

Cheers,J.

有趣的资源:

> W3C
> THIS

这里是W3C算法(与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>
http://stackoverflow.com/questions/11867545/change-text-color-based-on-brightness-of-the-covered-background-area

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 根据覆盖的背景区域的亮度更改文字颜色?