Gewusst wie: Positionieren Sie Text über einem Bild
Erfahren Sie, wie Sie Text über einem Bild platzieren.
Bildtext
Unten links
Oben links
Oben rechts
Unten rechts
Zentriert
So platzieren Sie Text im Bild
Schritt 1) HTML hinzufügen:
Beispiel
<div class="container">
<img src="img_snow_wide.jpg" alt="Snow"
style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top
Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div>
Schritt 2) CSS hinzufügen:
Beispiel
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom
left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position:
absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text
*/
.centered {
position:
absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Um mehr über das Stylen von Bildern zu erfahren, lesen Sie unser Tutorial zu CSS-Bildern .
Um mehr über die CSS-Positionierung zu erfahren, lesen Sie unser CSS-Positionierungs - Tutorial.