Javascript 根据覆盖背景区域的亮度更改文本颜色？

我已经考虑了一段时间了，所以现在我想知道你的观点，可能的解决方案，等等

我正在寻找一个插件或技术，改变文本的颜色或预定义的图像/图标之间的切换取决于它的父母的背景图像或-颜色覆盖像素的平均亮度

如果背景的覆盖区域相当暗，则将文本变为白色或切换图标

此外，如果脚本注意到父元素没有定义的背景色或-image，然后继续搜索最接近的（从父元素到它的父元素…），那就太好了

你觉得这个主意怎么样，你知道吗？已经有类似的东西了吗？脚本示例

---

干杯，J.

有趣的问题。我的直接想法是将背景的颜色反转为文本。这涉及到简单地解析背景并反转其RGB值

大概是这样的：

---

这方面的有趣资源：

以下是W3C算法（带）：

constrgb=[255,0,0]；
//随机更改为showcase更新
设置间隔（设置对比度，1000）；
函数setContrast（）{
//随机更新颜色
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-对比度
常量亮度=数学圆（（parseInt（rgb[0]）*299）+
（parseInt（rgb[1]）*587）+
（parseInt（rgb[2]）*114））/1000）；
const textColour=（亮度>125）？“黑色”：白色；
常量背景色='rgb（'+rgb[0]+'、'+rgb[1]+'、'+rgb[2]+'）；
$（'#bg'）.css（'color'，textColour）；
$（'#bg'）.css（'background-color'，backgroundcolor）；
}

#bg{
宽度：200px；
高度：50px；
}

文本示例

这篇关于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';
}

以下是我的尝试：

(function ($) {
    $.fn.contrastingText = function () {
        var el = this,
            transparent;
        transparent = function (c) {
            var m = c.match(/[0-9]+/g);
            if (m !== null) {
                return !!m[3];
            }
            else return false;
        };
        while (transparent(el.css('background-color'))) {
            el = el.parent();
        }
        var parts = el.css('background-color').match(/[0-9]+/g);
        this.lightBackground = !!Math.round(
            (
                parseInt(parts[0], 10) + // red
                parseInt(parts[1], 10) + // green
                parseInt(parts[2], 10) // blue
            ) / 765 // 255 * 3, so that we avg, then normalize to 1
        );
        if (this.lightBackground) {
            this.css('color', 'black');
        } else {
            this.css('color', 'white');
        }
        return this;
    };
}(jQuery));

然后使用它：

var t = $('#my-el');
t.contrastingText();

这将直接使文本变为黑色或白色。要设置图标，请执行以下操作：

if (t.lightBackground) {
    iconSuffix = 'black';
} else {
    iconSuffix = 'white';
}

然后每个图标可以看起来像

'save'+iconSuffix+'.jpg'

请注意，在任何容器溢出其父容器的情况下（例如，如果CSS高度为0，且溢出未隐藏），这将不起作用。要让它工作起来要复杂得多。

我发现这个脚本非常有用

它检测背景的总体亮度（无论是背景图像还是颜色），并根据背景的亮度将类应用于指定的文本元素（

background--light

或

background--dark

）

它可以应用于静止和移动的图元

---

（）

混合模式

实现了以下功能：

标题{
溢出：隐藏；
高度：100vh；
背景：url(https://www.w3schools.com/html/pic_mountain.jpg)50%/份；
}
氢{
颜色：白色；
字体：900 35vmin/50vh arial；
文本对齐：居中；
混合模式：差异化；
滤镜：投阴影（0.05em 0.05em橙色）；
}

在这里编辑我

如果您使用的是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))

---

通过组合答案[@alex ball，@jeremyharris]，我发现这是对我来说最好的方式：

$（'.elzahaby bg'）。每个（函数（）{
var rgb=$（this.css（'backgroundColor'）；
var colors=rgb.match（/^rgb\（\d+）\s*（\d+）\s*（\d+）$/）；
var r=颜色[1]；
var g=颜色[2]；
var b=颜色[3]；
变量o=数学圆（（parseInt（r）*299）+（parseInt（g）*587）+（parseInt（b）*114））/1000）；
如果（o>125）{
$（this.css（'color'，'black'）；
}否则{
$（this.css（'color'，'white'）；
}
});
*{
填充：9px；
}

颜色是白色的
颜色是黑色的
颜色是黑色的
颜色是白色的
只是一个想法而不是答案。可能有一种方法可以使用HSL设置颜色，然后查看亮度值。如果该值高于某个特定值，则应用css规则。可以想象，您可以将元素的背景色解析为R、G、B（以及可选的alpha）值，如果alpha通道设置为零，则将运行DOM树。然而，试图确定背景图像的颜色完全是另一回事。这里已经回答了@Pascal非常相似的问题，而且输入很好。。但这并不是我问题的确切答案。你可能想通过平均反转的R、G、B值，并将它们设置为彼此相等来降低“反转”颜色的饱和度。但是，此解决方案是从字符串中获取其基色，而不是从元素的CSS属性中获取。为了可靠，解决方案必须动态获取背景色，背景色通常返回rgb（）或rgba（）值，但可能因浏览器而异。是。为了便于解析，我只使用了十六进制值。我更新了小提琴，包括从CSS中获取元素的颜色。我更新了小提琴，加入了一种亮度控制（我对颜色数学一无所知，所以它可能不是真正的亮度）。这个怎么样？如果背景颜色是
808080
@它仍然会颠倒它，只是正好在光谱中间反转一些东西会导致它自己。这段代码只是反转颜色，这有其局限性。谢谢，这真的很有帮助。。这取决于设置的背景色。。但是你知道如何得到平均值吗
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))