[英]Change text color based on background color in a div
I have a div and have to place some text on it. 我有一个div,必须在上面放一些文字。 The background of the div is generated dynamically. div的背景是动态生成的。 So i want to decide on the text color based on the background. 所以我想根据背景决定文本颜色。
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') => black
(虽然白色看起来更好用红色)
Is this approach ok? 这种方法可以吗? or is there any other better way.. 或者还有其他更好的方法..
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. 另请注意,如果使用此方法,背景颜色的值可以是从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 + ')';
}
使用在这个问题的最高投票答案底部列出的方法 - 如果知道背景颜色如何找到漂亮的字体颜色?
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.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.