CSS-Schriftfarbe basierend auf Hintergrundfarbe umkehren

In CSS gibt es keine direkte Eigenschaft, mit der Sie die Schriftfarbe basierend auf umkehren können die Hintergrundfarbe. Es gibt jedoch verschiedene Techniken, mit denen Sie diesen Effekt erzielen können.

Pseudoelemente verwenden

Pseudoelemente können verwendet werden, um einen Wrapper um den Text zu erstellen, der Sie können dann selbstständig stylen. Zum Beispiel:

.inverted-bar {
    position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
    padding: 10px 0;
    text-indent: 10px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-content);
}

.inverted-bar:before {
    background-color: aqua;
    color: red;
    width: 100%;
}

.inverted-bar:after {
    background-color: red;
    color: aqua;
    width: 20%;
}

Verwenden von zwei DIVs

Für ältere Browser, die keine Pseudoelemente unterstützen, können Sie stattdessen zwei DIVs verwenden:

.inverted-bar {
    position: relative;
    padding: 10px;
    text-indent: 10px;
}

.inverted-bar:before {
    content: attr(data-content);
    background-color: aqua;
    color: red;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px 0;
    width: 100%;
}

.inverted-bar > div {
    content: attr(data-content);
    background-color: red;
    color: aqua;
    position: absolute;
    padding: 10px 0;
    top: 0;
    left: 0;
    width: 20%;
}

Hinweis: Die genaue Implementierung kann je nach Ihren spezifischen Anforderungen und der Browserunterstützung variieren.