Comment créer : Placer du texte sur une image

Apprenez à placer du texte sur une image.

Comment placer du texte dans une image

Première étape - Ajouter HTML :

<div class="container">
  <img src="img_snow_wide.jpg" alt="Neige" style="width:100%;">
  <div class="bottom-left">En bas à gauche</div>
  <div class="top-left">En haut à gauche</div>
  <div class="top-right">En haut à droite</div>
  <div class="bottom-right">En bas à droite</div>
  <div class="centered">Centré</div>
</div>

Deuxième étape - Ajouter CSS :

/* Conteneur contenant l'image et le texte */
.container {
  position: relative;
  text-align: center;
  color: white;
}
/* Text en bas à gauche */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}
/* Text en haut à gauche */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}
/* Text en haut à droite */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
/* Text en bas à droite */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}
/* Text centré */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Essayez personnellement

pages pertinentes

Tutoriel :Image CSS

Tutoriel :Positionnement CSS