新しいウェブサイトを立ち上げていますが、コントラストを維持するために、刻々と変化する背景色に基づいてテキストの色を変更する必要があります。私はSassに関係のない答えをウェブで探しましたが、どれもうまくいきませんでした...
JavaScriptを試してみましたが、手動で変更した固定色の場合にのみ機能します。
私の現在のファイル：https：//codepen.io/jonathanlee/pen/wZXvRY
var color = function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
setInterval(function() {
document.getElementById("test").style.backgroundColor = color(); //() to execute the function!
}, 3000);
var ww = function isDarkColor(rgb) {
return Math.round((
parseInt(rgb[0], 10) * 299 +
parseInt(rgb[1], 10) * 587 +
parseInt(rgb[2], 10) * 114) / 1000) <= 140
}
if (ww <= 140) {
document.getElementById("test").style.color = '#fff';
} else {
document.getElementById("test").style.color = '#000';
}
私が試したが機能しなかった他の解決策の1つ：http：//jsfiddle.net/QkSva/
function isDark(color) {
var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
return (match[1] & 255) +
(match[2] & 255) +
(match[3] & 255) <
3 * 256 / 2;
}
$('div').each(function() {
console.log($(this).css("background-color"))
$(this).css("color", isDark($(this).css("background-color")) ? 'white' : 'black');
});
実際の例は、私が取り組んでいるWebサイトhttps://nepmelbourne.com/qの代替ホームページです。ダイナミックな背景がありますが、白いテキストとのコントラストがよくない色がいくつかあります。
これを行う1つの方法は、次のように背景色の反対の色をテキストに設定することです。
function invertColor(hex, bw) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
var r = parseInt(hex.slice(0, 2), 16),
g = parseInt(hex.slice(2, 4), 16),
b = parseInt(hex.slice(4, 6), 16);
if (bw) {
// http://stackoverflow.com/a/3943023/112731
return (r * 0.299 + g * 0.587 + b * 0.114) > 186 ?
'#000000' :
'#FFFFFF';
}
// invert color components
r = (255 - r).toString(16);
g = (255 - g).toString(16);
b = (255 - b).toString(16);
// pad each with zeros and return
return "#" + padZero(r) + padZero(g) + padZero(b);
}
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
var color = function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
setInterval(function() {
var bgColor = color();
var textColor = invertColor(bgColor,true);
document.getElementById("test").style.backgroundColor = bgColor; //() to execute the function!
document.getElementById("test").style.color = textColor;
}, 3000);<div id="test">This is some text</div>から取得した反対のカラーコード現在の色に従って反対の色を生成するにはどうすればよいですか？
invertColor（）に追加のパラメーターbwを追加しました。bwがtrueに設定されている場合、背景が明るい場合はテキストの色が黒になり、その逆も同様です。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加