Überlagerung von Text auf Bildern

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.

Ü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.