Maison >interface Web >tutoriel HTML >Comment ajouter du texte aux images en HTML

Comment ajouter du texte aux images en HTML

WBOY
WBOYoriginal
2021-11-09 16:15:0867057parcourir

Méthode d'ajout : 1. Utilisez l'attribut position pour ajouter un style de positionnement relatif à l'élément conteneur div contenant des images et du texte ; 2. Utilisez l'attribut position pour ajouter un style de positionnement absolu à l'élément texte ; top attributs pour définir l'élément de texte sur la position de l'image, positionnez simplement le texte sur l'image.

Comment ajouter du texte aux images en HTML

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment ajouter du texte aux images html :

1 Créez un nouveau fichier html, nommé test.html, pour expliquer comment ajouter du texte aux images en utilisant html+css.

Comment ajouter du texte aux images en HTML

2. Dans le fichier test.html, utilisez la balise div pour créer un module, et dans le div, utilisez la balise img pour créer une image.

Comment ajouter du texte aux images en HTML

3. Dans le fichier test.html, dans la balise div, utilisez la balise p pour créer un morceau de texte. Ensuite, le texte sera ajouté à l'image via CSS.

Comment ajouter du texte aux images en HTML

4. Dans le fichier test.html, dans la balise css, utilisez "*" pour initialiser les marges intérieures et extérieures de tous les éléments de la page à 0 pour éviter d'affecter la définition de style css suivante.

Comment ajouter du texte aux images en HTML

5. Dans la balise css, définissez le style de l'élément div et définissez son attribut de position comme positionnement relatif (relatif).

Comment ajouter du texte aux images en HTML

6. Dans la balise css, définissez le style de l'élément p dans le div et définissez sa position d'attribut de position comme positionnement absolu (absolu). Ce positionnement absolu est relatif à la position de l'image, de sorte que. la distance du texte Le bord gauche de l'image est de 10 px, la distance depuis le bord supérieur de l'image est de 10 px et la couleur du texte est définie sur rouge.

Comment ajouter du texte aux images en HTML

7. Ouvrez le fichier test.html dans le navigateur pour vérifier l'effet.

Comment ajouter du texte aux images en HTML

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn