Comment ajouter du texte sur une image en utilisant HTML et CSS ? (exemple de code)

Dans cet article, nous vous présenterons comment utiliser HTML et CSS pour ajouter du texte aux images. Le contenu est très détaillé.

Sans plus tard, allons droit au but~

1 L'avantage d'utiliser HTML et CSS pour exprimer

n'est pas « l'écriture. texte dans l'image elle-même "", mais "Configurer le texte sur les images via HTML et CSS" présente les avantages suivants. (Tutoriel recommandé : Tutoriel vidéo CSS)

Les caractères ne seront pas flous même en zoomant

Il est également lu dans les moteurs de recherche (adapté au référencement)

Vous pouvez choisir des lettres

Le design réactif vous permet d'ajuster la taille de la police (vous pouvez faire quelque chose comme des lettres minuscules sur l'écran de votre smartphone...)

2. Placer du texte sur l'image

Étape 1 : Nous devons préparer une image

À titre d'exemple, je souhaite placer du texte blanc sur un fond sombre.

Étape 2 : Placez l'image et les lettres dans un élément div

Mettez l'image et les lettres dans une balise div. Dans l'exemple, placez le texte « Great Wall » dans la balise p. Bien sûr, vous pouvez utiliser la balise title au lieu de la balise p, ou vous pouvez utiliser la balise span.

<div class = "example" >  
<img  src="image/greatwall.jpg" alt="Comment ajouter du texte sur une image en utilisant HTML et CSS ? (exemple de code)" > 
<p>万里长城</p>
</div>

Étape 3 : Spécifiez l'attribut de position

Définissez l'attribut de position CSS pour chaque élément.

Spécifiez position:relative pour le div comme élément parent, et absolue pour la balise p contenant la chaîne. La balise img ne bouge pas.

Définissez la position de la balise p sur top:0 left:0;

Pour placer l'image en orientation paysage, spécifiez la largeur de la balise img comme largeur : 100 %.

.example{/*父元素div*/
  position: relative;/*相対定位*/
  }
.example p {
    position: absolute;/*絶対定位*/
  color: white;/*文字设为白色*/
  top: 0;  
  left: 0;
  }
.example img {  
  width: 100%;
  }

L'effet est le suivant :

Le texte apparaît dans le coin supérieur gauche de l'image. position:l'élément parent absolu déterminera la position par rapport à l'élément parent. top:0; left:0 signifie "l'image sera placée dans le coin supérieur gauche du parent (div)".

Étape 4 : Ajustez le style du texte

Ajustons maintenant le style de police, essayons d'agrandir la police et de la mettre en gras. De plus, afin d'afficher un effet esthétique, modifiez également le type de police.

.example{
  position: relative;
  }
.example p{
    position: absolute;
    color: white;
    top: 0;  
    left: 0;
    font-family :楷体,sans-serif;
    font-weight: bold;
    font-size: 2em;   
}
.example img{width: 100%;}

L'effet est le suivant :

Ceci est terminé Veuillez expliquer : Si vous souhaitez fixer la taille de l'image à une certaine. pixel, s'il vous plaît Selon le cas de width : 100%, spécifiez la largeur du div de l'élément parent en tant que pixel fixe.

3. Placer le texte au milieu de l'image

Dans certains cas, je souhaite "placer le texte au centre de l'image". Dans ce cas, le code CSS devrait être comme indiqué ci-dessous.

.example{
  position: relative;
  }
.example p{
    position: absolute;
    color: white;
   /* top: 0;  
    left: 0;*/
    font-family :楷体,sans-serif;
    font-weight: bold;
    font-size: 2em;
    top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
    
}
.example img{width: 100%;}

L'effet est le suivant :

Expliquons le centrage ci-dessus

en haut et à gauche sont 50%

Ceci est essentiellement placé au milieu. Cependant, cela différerait de la taille du texte.

Erreur lors de l'ajustement de la partie texte

Utiliser la transformation : traduisez-y pour corriger la différence de texte. Dans Translate(-50%,-50%), la différence entre le texte vertical et horizontal est corrigée. ttransform est un attribut CS3, mais il correspond également à d'autres navigateurs que IE8.

Pour correspondre aux anciens navigateurs, les traductions sont également écrites avec les préfixes du fournisseur (-ms et -wabkit-).

Si magin et padding sont ajoutés et qu'il y a un espace vide, il est peut-être décentré. Par conséquent, par mesure de prudence, modifions sa valeur à 0.

4. Afficher le nom de la catégorie avec une couleur d'arrière-plan dans l'image

Ce qui suit décrit comment afficher le texte avec une couleur d'arrière-plan sur l'image.

Veuillez consulter le code CSS suivant, le HTML est le même que ci-dessus

.example {
  position: relative;
  }
.example p {
  position: absolute;  
  top: 0;
  left: 0;
  margin: 0; 
  color: white;
  background: lightblue;
  font-size: 15px;  
  line-height: 1;
  padding: 5px 10px;
  }
.example img {
  width: 100%;
  }

L'effet est le suivant :

Lorsque l'étiquette est attachée au coin de l'image. Lorsque cette option est activée, les caractères sont fixes. Dans ce cas, vous pouvez voir clairement quelle que soit la luminosité de l’image. De même, si vous souhaitez modifier la taille de l'image, nous vous recommandons de spécifier la largeur du div de l'élément parent.

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!