Comment positionner du texte sur une image?

Souvent, les développeurs Web souhaitent placer du texte sur une image pour afficher des informations concernant cette image particulière. Cela peut également jouer un rôle important pour rendre votre site Web ou l'image plus attrayant, améliorant ainsi les chances d'attirer l'attention de l'utilisateur. Maintenant, il existe différentes positions où vous pouvez ajouter votre texte sur une image comme suit.

1. Coin supérieur gauche
2. Coin inférieur gauche
3. Centre
4. Le coin supérieur droit
5. Le coin inférieur droit

Ci-dessous, nous avons démontré chacune de ces positions.

Positionner le texte sur une image

Tout d'abord, nous ajouterons une image à notre page Web en utilisant HTML.

Html

Du texte

Dans le code ci-dessus, nous avons créé un élément div et imbriqué une image et un autre élément div. La première div, comme déjà mentionné, détient l'image et l'autre div. Pendant ce temps, le deuxième conteneur Div contient la position et le style du texte qui doit être placé sur l'image.

Sortir

Une image a été insérée dans la page Web.

Coin supérieur gauche

La première position du texte où nous allons régler est le coin supérieur gauche de l'image. Utilisez l'extrait de code suivant.

CSS

.IMG-Container
Position: relative;
Largeur: 400px;

.image
Largeur: 100%

.en haut à gauche
Position: absolue;
taille de police: 20px;
Police-poids: Bold;
Style de police: italique;
Couleur blanche;
en haut: 15px;
Gauche: 30px;

La position du premier élément div a été définie sur relative afin que nous puissions absolument positionner le deuxième élément div. Le texte à placer sur l'image a reçu une certaine taille, poids, style et couleur, pour le positionner dans le coin supérieur gauche, nous avons utilisé les propriétés supérieure et gauche.

Sortir

Le texte a été placé avec succès dans le coin supérieur gauche.

Coin inférieur gauche

Aux fins d'ajouter un texte dans le coin inférieur gauche de l'image, utilisez le code mentionné ci-dessous.

CSS

.div
Position: relative;
Largeur: 400px;

.image
Largeur: 100%

.en bas à gauche
Position: absolue;
taille de police: 20px;
Police-poids: Bold;
Style de police: italique;
Couleur blanche;
En bas: 3%;
Gauche: 8%;

Le reste du code est cependant le même pour positionner le texte dans le coin inférieur gauche, nous avons réglé la propriété inférieure à 3% et la propriété gauche à 8%. Vous pouvez modifier les valeurs de ces propriétés pour comprendre comment ces fonctions fonctionnent.

Sortir

Le texte était positionné dans le coin inférieur gauche avec une grande facilité.

Centre

De même, pour placer votre texte en position centrale, considérez l'exemple mentionné ci-dessous.

CSS

.div
Position: relative;
Largeur: 400px;

.image
Largeur: 100%

.centre
Position: absolue;
taille de police: 20px;
Police-poids: Bold;
Style de police: italique;
Couleur blanche;
en haut: 40%;
Gauche: 40%;

Dans le but d'ajuster le texte sur la position centrale de l'image, nous avons réglé la propriété supérieure et la propriété gauche à 40%.

Sortir

Nous avons réussi à placer le texte au centre de l'image

Le coin supérieur droit

Consultez le code ci-dessous pour comprendre comment placer du texte dans le coin supérieur droit de l'image.

CSS

.div
Position: relative;
Largeur: 400px;

.image
Largeur: 100%

.en haut à droite
Position: absolue;
en haut: 2%;
À droite: 10%;
taille de police: 20px;
Police-poids: Bold;
Style de police: italique;
Couleur blanche;

Ce que nous avons simplement fait pour placer le texte dans le coin supérieur droit, c'est que nous avons réglé la propriété supérieure à 2%, et la propriété droite à 10%. Ce n'est pas une règle difficile et rapide, par conséquent, vous pouvez modifier ces valeurs en fonction de votre désir.

Sortir

Le texte a été inséré dans le coin supérieur droit de l'image.

Le coin inférieur droit

La dernière position que nous allons démontrer est le coin inférieur droit de l'image. Suivez le code ci-dessous.

CSS

.div
Position: relative;
Largeur: 400px;

.image
Largeur: 100%

.en bas à droite
Position: absolue;
En bas: 5%;
À droite: 10%;
taille de police: 20px;
Police-poids: Bold;
Style de police: italique;
Couleur blanche;

Comme vous pouvez le voir que le reste du code est le même que dans des exemples précédents avec une seule différence pour placer le texte dans le coin inférieur droit, nous avons utilisé la propriété inférieure et la propriété droite.

Sortir

Le texte a été placé dans le coin inférieur droit.

Conclusion

Pour positionner votre texte sur une image, placez votre image et votre texte dans un conteneur Div et positionnez absolument le texte, en donnant en attendant une position relative. Différentes positions que vous pouvez placer votre texte sur une image sont le coin supérieur gauche, le coin inférieur gauche, le centre, le coin supérieur droit et le coin inférieur droit. Cette tâche peut être effectuée à l'aide de diverses propriétés CSS. Dans cet article, nous avons démontré chacune de ces positions ainsi que des exemples appropriés.