Superposition de texte sur une image : Améliorez la lisibilité avec les filtres de fond CSS

Introduction

Dans ce laboratoire, nous allons apprendre à utiliser les superpositions de texte sur des images avec CSS. Le but de ce laboratoire est de vous apprendre à afficher du texte au-dessus d'une image avec une superposition, de manière à ce qu'il soit lisible quelle que soit l'image et la couleur d'arrière-plan. Vous allez apprendre à utiliser la propriété backdrop-filter pour appliquer un effet de flou et de luminosité à votre texte, créant une conception professionnelle et visuellement attrayante.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Superposition de texte sur une image

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour afficher du texte au-dessus d'une image avec une superposition, utilisez la propriété backdrop-filter pour appliquer un effet blur(14px) et brightness(80%). Cela garantit que le texte est lisible quelle que soit l'image et la couleur d'arrière-plan. Voici un exemple de code HTML :

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

Et le code CSS correspondant :

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

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Superposition de texte sur une image. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.