Zmienić kolor tekstu na podstawie jasności zakrytego obszaru tła?

Już od jakiegoś czasu myślałem o następujących kwestiach, więc teraz chcę poznać Twoje opinie, możliwe rozwiązania i tak dalej.

Szukam wtyczki lub techniki, która zmienia kolor tekstu lub przełącza się między wstępnie zdefiniowanymi obrazami / ikonami w zależności od średniej jasności pokrytych pikseli obrazu tła lub koloru jego rodzica.

Jeśli zakryty obszar tła jest raczej ciemny, zmień tekst na biały lub zmień ikony.

Ponadto byłoby wspaniale, gdyby skrypt zauważył, że rodzic nie ma zdefiniowanego koloru tła lub obrazu, a następnie kontynuuje wyszukiwanie najbliższego (od elementu nadrzędnego do elementu nadrzędnego ...).

Jak myślisz, wiesz o tym pomyśle? Czy jest już coś podobnego? przykłady skryptów?

Pozdrawiam, J.

Ciekawe zasoby do tego:

• W3C - Upewnij się, że kombinacje kolorów pierwszego planu i tła zapewniają wystarczający kontrast
• Obliczanie postrzeganej jasności koloru

Oto algorytm W3C (również z demonstracją 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>

Ten artykuł o 24 sposobach obliczania kontrastu kolorów może Cię zainteresować. Zignoruj ​​pierwszy zestaw funkcji, ponieważ są one błędne, ale formuła YIQ pomoże Ci określić, czy użyć jasnego, czy ciemnego koloru pierwszego planu.

Po uzyskaniu koloru tła elementu (lub przodka) możesz użyć tej funkcji z artykułu, aby określić odpowiedni kolor pierwszego planu:

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';
}

Interesujące pytanie. Moją natychmiastową myślą było odwrócenie koloru tła jako tekstu. Wymaga to po prostu przeanalizowania tła i odwrócenia jego wartości RGB.

Coś takiego: 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+')');

mix-blend-mode Zrób sztuczkę:

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>

Dodatek (marzec 2018): Następnie ładny samouczek wyjaśniający różne typy trybów / implementacji: https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

Uważam, że skrypt BackgroundCheck jest bardzo przydatny.

Wykrywa ogólną jasność tła (czy to obraz tła, czy kolor) i stosuje klasę do przypisanego elementu tekstowego ( background--lightlub background--dark), w zależności od jasności tła.

Może być stosowany do nieruchomych i ruchomych elementów.

( Źródło )

Jeśli używasz ES6, przekonwertuj hex na RGB, a następnie możesz użyć tego:

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))

Oto moja próba:

(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));

Następnie, aby go użyć:

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

Spowoduje to, że tekst będzie odpowiednio czarny lub biały. Aby wykonać ikony:

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

Wtedy każda ikona mogłaby wyglądać 'save' + iconSuffix + '.jpg'.

Zauważ, że to nie zadziała, gdy jakikolwiek kontener przepełni swój element nadrzędny (na przykład, jeśli wysokość CSS wynosi 0, a przepełnienie nie jest ukryte). Uzyskanie takiej pracy byłoby znacznie bardziej złożone.

Łącząc odpowiedzi [@ alex-ball, @jeremyharris] stwierdziłem, że jest to dla mnie najlepszy sposób:

        $('.elzahaby-bg').each(function () {
            var rgb = $(this).css('backgroundColor');
            var colors = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

            var r = colors[1];
            var g = colors[2];
            var b = colors[3];

            var o = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) /1000);

            if(o > 125) {
                $(this).css('color', 'black');
            }else{
                $(this).css('color', 'white');
            }
        });

*{
    padding: 9px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class='elzahaby-bg' style='background-color:#000'>color is white</div>

<div class='elzahaby-bg' style='background-color:#fff'>color is black</div>
<div class='elzahaby-bg' style='background-color:yellow'>color is black</div>
<div class='elzahaby-bg' style='background-color:red'>color is white</div>