3

div があり、その上にテキストを配置する必要があります。div の背景は動的に生成されます。背景に基づいてテキストの色を決めたいと思います。

これまでのところ、私はこれを試しました。

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

これを使用すると、赤のために黒になります。invert('#ff0000') => black（白は赤に似合いますが）

このアプローチは大丈夫ですか？または他の良い方法はありますか..

4

3 に答える 3

1

これが私がjsfiddleでjQueryを使用して思いついた簡単な解決策です

また、この方法を使用する場合、background-colorの値はrgb（50、205、50）からlime、＃32CD32までの任意の値にすることができ、それでも機能することに注意してください。

あなたのhtmlの場合：

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

そして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 + ')');
});​



編集：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 + ')';
}
于 2012-06-21T14:13:27.270 に答える
1

この質問に対する最も投票された回答の下部に概説されているアプローチを使用してください-背景色がわかっている場合、見栄えの良いフォントの色を見つける方法は?

于 2012-06-21T14:13:38.310 に答える
0

これはすべての色で機能します。

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.
于 2015-04-03T02:21:00.750 に答える