根据div中的背景颜色更改文本颜色

I have a div and have to place some text on it. The background of the div is generated dynamically. So i want to decide on the text color based on the background.

我有一个div，必须在上面放一些文字。 div的背景是动态生成的。所以我想根据背景决定文本颜色。

So far i have tried out this.

到目前为止，我已经尝试过这个。

function invert(color){
   return (color.replace('#','0x')) > (0xffffff/2) ? 'black' : 'white'
}

using this i'm getting black for red. invert('#ff0000') => black (Though White looks better with red)

使用这个，我变红了。 invert（'＃ff0000'）=>黑色（虽然白色看起来更好用红色）

Is this approach ok? or is there any other better way..

这种方法可以吗？或者还有其他更好的方法..

3 个解决方案

#1

Use the approach outlined at the bottom of the top voted answer on this question - How to find good looking font color if background color is known?

使用在这个问题的最高投票答案底部概述的方法 - 如果知道背景颜色如何找到漂亮的字体颜色？

#2

Here's a quick solution I came up with using jQuery in jsfiddle

这是我在jsfiddle中使用jQuery的快速解决方案

Also note that if you use this method, the value for background-color can be anything from rgb(50, 205, 50) to lime to #32CD32 and it will still work.

另请注意，如果使用此方法，background-color的值可以是从rgb（50,205,50）到lime到＃32CD32的任何值，它仍然有效。

For your html:

对于你的HTML：

<div id="test" style="background-color: #000000;">Can you see this text?</div>

And the javascript:

和javascript：

$(document).ready(function(){
    var color = $('#test').css('background-color');
    var startIndex = color.indexOf('(') + 1;
    var lastIndex = color.indexOf(')');

    var values = color.substr(startIndex, lastIndex - startIndex).split(',');

    var r = 0;
    var g = 0;
    var b = 0;

    $(values).each(function(i) {
        if (i == 0) {
            r = 255 - values[i];
        }
        if (i == 1) {
            g = 255 - values[i];
        }
        if (i == 2) {
            b = 255 - values[i];
        }
    });

    $('#test').css('color', 'rgb(' + r + ',' + g + ',' + b + ')');
});

EDIT: the non-jquery way (doesn't work with color names like lime, blue, red, etc)

编辑：非jquery方式（不适用于颜色名称，如石灰，蓝色，红色等）

function invert(color) {
    var startIndex = color.indexOf('(') + 1;
    var lastIndex = color.indexOf(')');

    var values = color.substr(startIndex, lastIndex - startIndex).split(',');

    var r = 0;
    var g = 0;
    var b = 0;

    for(i= 0; i < values.length; i++) {
        if (i == 0) {
            r = 255 - values[i];
        }
        if (i == 1) {
            g = 255 - values[i];
        }
        if (i == 2) {
            b = 255 - values[i];
        }
    }
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

#3

This will work for every color.

这适用于每种颜色。

var luminance = {r: 0.2126, g: 0.7152, b:0.0722};
var color = '#ffaa11'; // your color
var r = parseInt(color.substring(1,3), 16);
var g = parseInt(color.substring(3,5), 16);
var b = parseInt(color.substring(5), 16);
var rgb = [r / 255, g / 255, b / 255];
for (var i = rgb.length; i--; )
    rgb[i] =
        rgb[i] <= 0.03928 ?
            rgb[i] / 12.92 :
            Math.pow(((rgb[i] + 0.055) / 1.055), 2.4);
var thresh = ((luminance.r * rgb[0]) +
              (luminance.g * rgb[1]) +
              (luminance.b * rgb[2]));
// now if thresh > 0.22 set text color to #222
// else set it to #ccc
// you now have readable text on every hex background.

#1