Pour ajouter du texte sur une image en CSS, vous pouvez utiliser la propriété CSS « position » pour placer un conteneur de texte sur l’image. Voici un exemple de code CSS pour ajouter du texte sur une image :
HTML :
<div class="image-container">
<img src="chemin-de-votre-image.jpg" alt="Description de votre image">
<div class="text-container">
<p>Votre texte ici</p>
</div>
</div>
CSS :
.image-container {
position: relative; /* Définissez la position relative sur le conteneur parent */
}
.text-container {
position: absolute; /* Définissez la position absolue sur le conteneur enfant */
top: 50%; /* Positionnez le conteneur enfant à 50% de la hauteur du conteneur parent */
left: 50%; /* Positionnez le conteneur enfant à 50% de la largeur du conteneur parent */
transform: translate(-50%, -50%); /* Utilisez la fonction translate() pour centrer le conteneur enfant */
}
.text-container p {
color: white; /* Définissez la couleur du texte */
font-size: 2rem; /* Définissez la taille de police */
font-weight: bold; /* Définissez le poids de police */
text-align: center; /* Centrez le texte */
text-shadow: 1px 1px 1px black; /* Ajoutez une ombre au texte pour le faire ressortir */
}
Dans cet exemple, nous avons créé un conteneur parent pour l’image et le texte, puis nous avons ajouté un conteneur enfant pour le texte en utilisant la position absolue. Nous avons ensuite utilisé la fonction translate() pour centrer le conteneur enfant sur l’image.
N’oubliez pas de remplacer le chemin de votre image et le texte par les vôtres dans le code HTML. Vous pouvez également personnaliser les styles CSS selon vos préférences.