Wie kann ich die Schriftfarbe basierend auf der Hintergrundfarbe in CSS dynamisch anpassen?

Dynamische Schriftfarben basierend auf Hintergrundfarben erstellen

Mit CSS ist es möglich, die Schriftfarbe basierend auf der Hintergrundfarbe automatisch anzupassen und so nachzuahmen Der im bereitgestellten Bild gezeigte Effekt.

Um dies zu erreichen, verwenden wir CSS-Eigenschaften und -Techniken, die in der gesamten modernen Welt weitgehend unterstützt werden Browser:

Mix-Blend-Mode-Eigenschaft:

Während die Mix-Blend-Mode-Eigenschaft das dynamische Mischen von Farben ermöglicht, ist es wichtig zu beachten, dass sie von nicht unterstützt wird Internet Explorer (IE).

Pseudoelemente und Klasse Namen:

Stattdessen nutzen wir Pseudoelemente und Klassennamen, um den gewünschten Effekt zu erzielen. Indem wir ein untergeordnetes Element direkt innerhalb eines übergeordneten Elements platzieren, können wir bestimmte CSS-Regeln anwenden, um eine kontrastierende Schriftfarbe zu erstellen:

.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%;
}

In diesem Snippet weisen wir das Dateninhaltsattribut einem übergeordneten Element zu und verwenden es CSS, um den Text innerhalb seiner untergeordneten Elemente zu manipulieren. Die Pseudoelemente :before und :after sorgen für den gewünschten Kontrasteffekt.

HTML-Struktur:

Um diese Technik zu nutzen, sollte die HTML-Struktur dem folgenden Code ähneln:

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

Durch die Einbindung dieser CSS-Eigenschaften und des Pseudo-Element-Ansatzes erstellen wir effektiv dynamische Schriftfarben, die sich an die Hintergrundfarbe anpassen, was zu einer Benutzeroberfläche führt Komponente, die sich automatisch anpasst, um die Lesbarkeit zu verbessern.

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