Comment afficher du texte sur une image avec HTML / CSS
Vous pouvez utiliser les méthodes de positionnement en combinaison avec la propriété margin en CSS pour positionner ou placer le texte sur une image.
Code HTML :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Afficher du texte sur une image avec HTML / CSS</title> <style type="text/css"> /* Mettez le code CSS ici. */ </style> </head> <body> <div class="container"> <img src="https://1.bp.blogspot.com/-w-wLWap_ydk/XSZZ3wSKtcI/AAAAAAAAFFY/-BWB5LvxBA0imZ8uMw-XvTmsw8k7Pk1uQCLcBGAs/s400/test1.jpg"> <div class="text"> <h1>Fleurs</h1> </div> </div> </body> </html>
Code CSS :
.container {
display: inline-block;
position: relative;
}
.container .text {
background: rgba(0, 0, 0, 0.8);
z-index: 1;
position: absolute;
text-align: center;
font-family: Georgia;
margin: 0 auto;
left: 0;
right: 0;
top: 30%;
color: white;
width: 70%;
}
| Résultat |
|---|
Fleurs |
🚀 Boostez votre productivité avec les meilleurs outils Web → Essayez-les
- Comment remplacer le Checkbox par un icone fontawesome
- Comment empêcher le redimensionnement d’un textarea en CSS
- Comment créer deux div côte à côte de la même hauteur en CSS
- Comment supprimer l’espace entre les cellules d’une colonne d’un tableau en CSS
- Comment placer une bordure à l’intérieur d’un bloc div en CSS
- Comment changer une image au survol avec CSS
- Comment rendre une DIV modifiable en HTML
- Comment changer la couleur du texte au survol en CSS
- Comment ajouter l’ombre sur un texte en CSS
- Comment ajouter l’ombre aux éléments HTML en CSS
- Comment créer un curseur personnalisé avec CSS
- Comment afficher du texte sur une image avec HTML / CSS
- Comment créer un lien avec un bouton HTML
- Comment supprimer l’espace blanc sous une image avec CSS
- Comment changer la transparence du background sans affecter le texte
- Comment créer une ligne verticale en HTML
- Comment changer l’aspect du curseur en CSS
- Comment redimensionner automatiquement une image pour l’adapter à un bloc DIV avec CSS
- Comment changer la couleur de la balise HR avec CSS
- Comment aligner un bloc DIV horizontalement avec CSS
- Comment définir la hauteur d’une DIV à 100% avec CSS
- Comment aligner le texte verticalement au centre d’une DIV avec CSS
- Comment ajuster la taille d’une div à son contenu en CSS
- Comment créer une liste sans puces en HTML
- Comment superposer une div sur une autre div avec CSS
- Comment redimensionner une image en background avec CSS
- Comment désactiver un lien en utilisant uniquement CSS
- Comment aligner verticalement une image dans une DIV en CSS
- Comment écrire des commentaires en CSS
- Comment écrire des commentaires en HTML
- Changer le bouton parcourir d’un input de type file avec CSS
- Personnaliser la balise select avec CSS
- Personnaliser les boutons checkbox avec CSS
- Personnaliser les boutons radio avec CSS
QCMs qui pourraient vous intéresser :
- Questions techniques sur MYSQL
- QCM MySQL Corrigé – Optimisation de requêtes
- QCM Base de données avec correction
- QCM sur PHP
- QCM Symfony
- QCM AngularJS
- QCM React
- QCM HTML / CSS
- QCM Java – Programmation Orientée Objet
- QCM Python
- QCM Cloud Computing
- QCM Framework Spring
- QCM Javascript
- QCM jQuery
- QCM Oracle
- QCM sur GIT – Gestionnaire de version
- QCM Linux – Gestion de processus
- QCM Réseau
- QCM Architecture des ordinateurs
- QCM Securité informatique
- QCM En Informatique Générale
- QCM en C
- QCM en C#
- QCM sur l'algorithmique
- QCM Word
- QCM Excel
- QCM PowerPoint
- QCM Access
J’apprécie énormément ce cours
thank you very Nice