`).
2. CSS-Styling :
- Gestalten Sie das Bild mit geeigneten Abmessungen und den gewünschten Effekten.
- Gestalten Sie den Beschriftungstext mit dem „figcaption“-Selektor.
3. Untertitelpositionierung :
- Verwenden Sie die Eigenschaft „position“, um die Beschriftung relativ zum Bild zu positionieren. Zu den gängigen Optionen gehören „absolut“, „relativ“ und „statisch“.
- Passen Sie die Eigenschaften „oben“, „rechts“, „unten“ und „links“ an, um die Position der Beschriftung zu steuern.
4. Darstellung der Untertitel :
- Verwenden Sie die Eigenschaften „background-color“, „color“, „padding“ und „margin“, um den Hintergrund, die Textfarbe, den Abstand und die Einrückung der Beschriftung zu steuern.
5. Textausrichtung :
- Verwenden Sie die Eigenschaft „text-align“, um den Beschriftungstext zu zentrieren, linksbündig oder rechtsbündig auszurichten.
6. Hover-Effekte (optional) :
- Fügen Sie Hover-Effekte zum Bild oder zur Beschriftung hinzu, indem Sie die Pseudoklasse „:hover“ verwenden, um die Benutzerinteraktion zu verbessern.
7. Medienabfragen (optional) :
- Verwenden Sie Medienabfragen, um den Stil der Beschriftung für verschiedene Bildschirmgrößen anzupassen.
Hier ist ein Beispiel für ein CSS-Code-Snippet:
„css
.image-container {
Position:relativ;
Breite:300px;
}
.image-container img {
Breite:100 %;
}
.image-container figcaption {
Position:absolut;
unten:0;
links:0;
Breite:100 %;
Hintergrundfarbe:rgba(0, 0, 0, 0,5);
Farbe:#fff;
Polsterung:10px;
Textausrichtung:Mitte;
}
@media (maximale Breite:600 Pixel) {
.image-container figcaption {
Schriftgröße:0,8rem;
}
}
„
In diesem Beispiel ist die Beschriftung absolut unten links im Bildcontainer positioniert, mit einem halbtransparenten schwarzen Hintergrund und weißem Text. Über eine Medienabfrage werden die Stile auch für kleinere Bildschirme angepasst.
Experimentieren Sie mit verschiedenen Styling-Optionen, um einzigartige und optisch ansprechende Bildunterschrifteneffekte zu erzielen.
