Comment écrire sur une image en HTML et CSS ?

Pour écrire sur une image, en HTML et CSS, vous devez :

• Créer un contenant HTML.
• Insérer votre image dans le contenant.
• Insérer une DIV avec le texte.
• Créer deux CLASS CSS pour superposer le texte sur l'image.

Exemple de code HTML pour écrire sur une image en HTML :

<div class="contenant">
  <img src="image.jpg" alt="image">
  <div class="texte_centrer">Exemple de texte</div>
</div>

Code CSS de la CLASS du contenant, et celle de la DIV du texte :

<style>
.contenant {
  position: relative;
  text-align: center;
  color: red;
}

.texte_centrer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

Remarque : Ce sont les positions relative et absolute qui permettent de positionne le texte sur l'image en HTML et CSS.

Remarque : Avec cette méthode pour positionner un texte sur une image, si l'internaute enregistre l'image, le texte n'y sera pas intégré. Si vous voulez modifier l'image de telle manière que le texte soit bel et bien écrit sur l'image, vous devez utiliser PHP et la libraire GD.