Comment puis-je positionner avec précision du texte sur des images à l'aide de CSS ?

Positionnement du texte sur les images avec CSS

Lors de l'ajout de texte sur une image en CSS, obtenir un alignement précis peut être difficile. Explorons différentes façons de positionner efficacement le texte sur les images.

Dans votre exemple, vous avez utilisé position: Absolute sur l'élément de texte, ce qui est l'approche correcte. Cependant, le positionnement implique également de définir avec précision les propriétés top, left et width.

Dans votre code :

.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}

Le problème réside dans l'utilisation de width : 100 % et left : 0 sur le h2. élément. Cela amène le texte à s'étendre au-delà des limites de l'image. Au lieu de cela, définissez la largeur sur une valeur px spécifique, en vous assurant qu'elle est plus petite que la largeur de l'image.

Une autre option pour positionner le texte sur une image consiste à utiliser l'index z et la position : absolue. Voici un exemple :

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}

<div>

Avec z-index, vous pouvez positionner le texte au-dessus des autres éléments. En définissant méticuleusement les propriétés haut et gauche, vous pouvez vous assurer que le texte est centré sur l'image.

Enfin, lorsque vous utilisez background-image, assurez-vous que html2pdf prend en charge cette fonctionnalité. Sinon, vous risquez de ne pas obtenir le résultat souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!