Wie kann ich die CSS-Schriftfarbe basierend auf der Hintergrundfarbe umkehren?

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 herum zu erstellen 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%;
}

Verwendung von zwei DIVs

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

<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>

.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 Ihrem Browser variieren Unterstützung.

Das obige ist der detaillierte Inhalt vonWie kann ich die CSS-Schriftfarbe basierend auf der Hintergrundfarbe umkehren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!