html用颜色覆盖图片,根据HTML中覆盖的背景区域的亮度更改文本颜色？

通过使用以下代码片段，可以根据其父级背景颜色的覆盖像素的平均亮度来更改文本颜色。var rgb = [255, 0, 0];

setInterval(display, 1000);

function display() {

rgb[0] = Math.round(Math.random() * 255);

rgb[1] = Math.round(Math.random() * 255);

rgb[2] = Math.round(Math.random() * 255);

var d = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) +

(parseInt(rgb[2]) * 114)) / 1000);

//对于前途

var f = (d> 125) ? 'black' : 'white';

//用于背景

var b = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';

$('#box').css('color', f);

$('#box').css('background-color', b);

}

 Demo

以下是CSS-#box {

width: 300px;

height: 300px;

}