Überlagerung von Text auf Bildern: Lesbarkeit mit CSS Backdrop-Filtern verbessern

Einführung

In diesem Lab werden wir uns mit der Überlagerung von Text auf Bilder mit CSS beschäftigen. Ziel dieses Labs ist es, Ihnen zu beibringen, wie man Text auf einem Bild mit einer Überlagerung anzeigt, sodass er unabhängig von dem Hintergrundbild und der Hintergrundfarbe lesbar ist. Sie werden lernen, wie Sie die Eigenschaft backdrop-filter verwenden, um einen Blur- und einen Helligkeitseffekt auf Ihren Text anzuwenden und so ein professionelles und visuell ansprechendes Design zu erstellen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Überlagerung von Text auf Bildern

index.html und style.css wurden bereits in der VM zur Verfügung gestellt.

Um Text auf einem Bild mit einer Überlagerung anzuzeigen, verwenden Sie die Eigenschaft backdrop-filter, um einen Effekt von blur(14px) und brightness(80%) anzuwenden. Dadurch wird sichergestellt, dass der Text unabhängig von dem Hintergrundbild und der Hintergrundfarbe lesbar ist. Hier ist ein Beispiel für HTML-Code:

<div>
  <h3 class="text-overlay">Hello, World</h3>
  <img src="https://picsum.photos/id/1050/1200/800" />
</div>

Und der entsprechende CSS-Code:

div {
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem;
  font-size: 2rem;
  font-weight: 300;
  color: white;
  backdrop-filter: blur(14px) brightness(80%);
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Überlagerung von Text auf Bildern" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.