我正在寻找一种插件或技术，可以根据其父背景图像或颜色的覆盖像素的平均亮度来更改文本颜色或在预定义图像/图标之间切换。
如果其背景的覆盖区域相当暗，请将文本设为白色或切换图标。
此外，如果脚本能够注意到父元素是否没有定义的背景颜色或图像，然后继续搜索最近的（从父元素到其父元素......），那就太好了。
你怎么看，知道这个想法吗？已经有类似的东西了吗？例子？
根据覆盖背景区域的亮度更改文本颜色？
IT技术
javascript
jquery
html
css
sass
2021-01-18 04:27:47
6个回答
有趣的资源：
这是 W3C 算法（也有JSFiddle 演示）：
const rgb = [255, 0, 0];
// Randomly change to showcase updates
setInterval(setContrast, 1000);
function setContrast() {
// Randomly update colours
rgb[0] = Math.round(Math.random() * 255);
rgb[1] = Math.round(Math.random() * 255);
rgb[2] = Math.round(Math.random() * 255);
// http://www.w3.org/TR/AERT#color-contrast
const brightness = Math.round(((parseInt(rgb[0]) * 299) +
(parseInt(rgb[1]) * 587) +
(parseInt(rgb[2]) * 114)) / 1000);
const textColour = (brightness > 125) ? 'black' : 'white';
const backgroundColour = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
$('#bg').css('color', textColour);
$('#bg').css('background-color', backgroundColour);
}#bg {
width: 200px;
height: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg">Text Example</div>这篇关于计算颜色对比度的24 种方法的文章可能会让您感兴趣。忽略第一组函数，因为它们是错误的，但 YIQ 公式将帮助您确定是使用浅色还是深色前景色。
获得元素的（或祖先的）背景颜色后，您可以使用文章中的此函数来确定合适的前景色：
function getContrastYIQ(hexcolor){
hexcolor = hexcolor.replace("#", "");
var r = parseInt(hexcolor.substr(0,2),16);
var g = parseInt(hexcolor.substr(2,2),16);
var b = parseInt(hexcolor.substr(4,2),16);
var yiq = ((r*299)+(g*587)+(b*114))/1000;
return (yiq >= 128) ? 'black' : 'white';
}
mix-blend-mode 诀窍是：
header {
overflow: hidden;
height: 100vh;
background: url(https://www.w3schools.com/html/pic_mountain.jpg) 50%/cover;
}
h2 {
color: white;
font: 900 35vmin/50vh arial;
text-align: center;
mix-blend-mode: difference;
filter: drop-shadow(0.05em 0.05em orange);
}<header>
<h2 contentEditable role='textbox' aria-multiline='true' >Edit me here</h2>
</header>添加（2018 年 3 月）：以下是一个很好的教程，解释了所有不同类型的模式/实现：https : //css-tricks.com/css-techniques-and-effects-for-knockout-text/
有趣的问题。我的直接想法是将背景颜色反转为文本。这涉及简单地解析背景并反转其 RGB 值。
像这样的东西：http : //jsfiddle.net/2VTnZ/2/
var rgb = $('#test').css('backgroundColor');
var colors = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
var brightness = 1;
var r = colors[1];
var g = colors[2];
var b = colors[3];
var ir = Math.floor((255-r)*brightness);
var ig = Math.floor((255-g)*brightness);
var ib = Math.floor((255-b)*brightness);
$('#test').css('color', 'rgb('+ir+','+ig+','+ib+')');
如果您使用的是 ES6，请将十六进制转换为 RGB，然后可以使用：
const hexToRgb = hex => {
// turn hex val to RGB
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
}
: null
}
// calc to work out if it will match on black or white better
const setContrast = rgb =>
(rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000 > 125 ? 'black' : 'white'
const getCorrectColor = setContrast(hexToRgb(#ffffff))
其它你可能感兴趣的问题