`).
2. Style CSS :
- Stylisez l'image avec les dimensions appropriées et les effets souhaités.
- Stylisez le texte de la légende à l'aide du sélecteur `figcaption`.
3. Positionnement des légendes :
- Utilisez la propriété `position` pour positionner la légende par rapport à l'image. Les options courantes incluent « absolu », « relatif » et « statique ».
- Ajustez les propriétés « top », « right », « bottom » et « left » pour contrôler la position de la légende.
4. Apparence des légendes :
- Utilisez les propriétés `background-color`, `color`, `padding` et `margin` pour contrôler l'arrière-plan de la légende, la couleur du texte, l'espacement et l'indentation.
5. Alignement du texte :
- Utilisez la propriété `text-align` pour centrer, aligner à gauche ou à droite le texte de la légende.
6. Effets de survol (facultatif) :
- Ajoutez des effets de survol à l'image ou à la légende en utilisant la pseudo-classe `:hover` pour améliorer l'interaction de l'utilisateur.
7. Requêtes multimédias (facultatif) :
- Utilisez des requêtes multimédias pour ajuster le style de la légende en fonction de différentes tailles d'écran.
Voici un exemple d'extrait de code CSS :
```css
.image-conteneur {
position :relative;
largeur :300 px ;
}
.image-conteneur img {
largeur :100 %;
}
.image-conteneur figcaption {
position :absolue;
bas :0;
gauche :0;
largeur :100 %;
couleur d'arrière-plan :rgba(0, 0, 0, 0,5);
couleur :#fff ;
remplissage : 10 px ;
alignement du texte :centre ;
}
@media (largeur maximale :600 px) {
.image-conteneur figcaption {
taille de police :0,8rem ;
}
}
```
Dans cet exemple, la légende est positionnée absolument en bas à gauche du conteneur d'image, avec un fond noir semi-transparent et du texte blanc. Les styles sont également ajustés pour les écrans plus petits à l’aide d’une requête multimédia.
Expérimentez avec différentes options de style pour créer des effets de légende d'image uniques et visuellement attrayants.
