Wie kann ich mithilfe von CSS-Verläufen die Textfarbe basierend auf der Hintergrundfarbe dynamisch anpassen?

Anpassung der Textfarbe auf unterschiedlichen Hintergründen

Auf der Suche nach einem Fortschrittsbalkendesign möchten Sie die Textfarbe basierend auf dem Hintergrund dynamisch anpassen Hintergrundfarbe. Konkret streben Sie schwarzen/dunkelgrauen Text auf hellem Hintergrund, schwarzen/dunkelgrauen Text auf mäßig hellem Hintergrund und weißen Text auf dunklem Hintergrund an.

Erste Versuche mit dem Mix-Blend-Modus und anderen Filtern haben sich als erfolglos erwiesen, um den gewünschten Effekt zu erzielen. Eine praktikable Lösung besteht jedoch darin, einen zusätzlichen Farbverlauf für die Textfärbung zu verwenden, ohne auf den Mix-Blend-Modus angewiesen zu sein.

Verbessertes CSS-Styling

Implementieren Sie den folgenden CSS-Code, um dies zu erreichen Ihre gewünschte Textfarbanpassung:

.container {
  background: linear-gradient(to right, #43a047 50%, #eee 0);
  text-align: center;
}

.text {
  background: linear-gradient(to right, white 50%, black 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

HTML Markup

Platzieren Sie Ihren Textinhalt innerhalb des .container-Elements in einem .text-Element:

<div class="container">
  <div class="text">Some text here</div>
</div>

Erklärung

Die Ein zusätzlicher Farbverlauf innerhalb von .text erstellt einen Farbverlauf von Weiß nach Schwarz, wobei die transparente Farbe als Textfüllung festgelegt wird. Dadurch kann der darunter liegende Hintergrund mit dem Text verschmelzen, was zu dem gewünschten Farbanpassungseffekt führt.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS-Verläufen die Textfarbe basierend auf der Hintergrundfarbe dynamisch anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!