Auto-Kontrast Schriftfarbe auf Hintergrund

Ich habe einen hintergrund von einem Feld. Die Unterseite ist grün, die Oberseite ist Grau. Es wird text auf dem hintergrund. Gibt es eine Möglichkeit, die für den text zu "Sinn", welche Farbe der hintergrund und färbe die Schrift in einer Weise, um es Kontrast?

Beispielsweise der text über den grauen Himmel heller und der text über dem grünen Feld würde dunkler werden, um es besser sichtbar zu machen.

Kann ich erreichen, ziemlich weit auf, aber alle Vorschläge sind willkommen. (Bitte beachten, ich bin nicht auf der Suche nach der Antwort auf manuell ändern Sie die schriftart-Farben.)

InformationsquelleAutor Evorlor | 2014-01-22
  1. 19

    Mehr als ein experiment als sonst:

    Legen Sie den text mit einem hintergrund der Erben, um den hintergrund von der Basis; dann befestigen Sie es um den text, und wenden Sie dann einige Filter:

    .test {
    width: 800x;
    height:220px;
    font-size: 200px;
    background-image: url(bosque.jpg); 
    color: white;
    position: relative;
}

.inner {
    position: relative;
    background-image: inherit;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-filter: invert() sepia();
}

    fiddle

    (Funktioniert nur in webkit)

    Überprüfen Sie auch dieses lieben:

    animierte Wahnsinn

    Kontrast animation

    UPDATE: Wir haben neue Möglichkeiten, dies zu behandeln. Hier finden Sie eine demo mit mix-blend-mode: difference

    CSS:

    div {
  font-size: 300px;
  color: gray;
  mix-blend-mode: difference;
}
body {
  background-image: url(http://placekitten.com/900/600);
}

    HTML:

    <div>TEST</div>

    InformationsquelleAutor vals
Schreibe einen Kommentar