Positionieren Sie Text mit CSS über einem Bild
In einigen Fällen können Texte zu Fotos auf einer Webseite hinzugefügt werden, und Bildunterschriften können aus dem Text auf dem Bild erstellt werden. Der Text kann nicht ausschließlich mit HTML-Komponenten über einem Bild platziert werden.
Dafür werden CSS-Attribute benötigt. Dieses Tutorial zeigt, wie man mit CSS Text über einem Bild positioniert.
Positionieren Sie Text mit CSS über einem Bild
Text auf dem Bild kann mit dem CSS-Attribut position positioniert werden. Geben Sie dazu das Bild position:relative und den Text position:absolute an.
Fügen Sie innerhalb eines <div>-Elements beide Komponenten hinzu. Wir können die Eigenschaften top, bottom, left und right verwenden, um Text auf dem Bild an einer bestimmten Stelle zu positionieren.
Code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: blue;
}
.bottom-left {
position: absolute;
bottom: 5px;
left: 12px;
}
.top-left {
position: absolute;
top: 5px;
left: 12px;
}
.top-right {
position: absolute;
top: 5px;
right: 12px;
}
.bottom-right {
position: absolute;
bottom: 5px;
right: 12px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>How to place text over an image:</p>
<div class="container">
<img src="/img/DelftStack/logo.png" alt="DelftStack Logo" style="width:100%;">
<div class="bottom-left">Left Bottom</div>
<div class="top-left">Left Top</div>
<div class="top-right">Right Top</div>
<div class="bottom-right">Right Bottom</div>
<div class="centered">Center</div>
</div>
</body>
</html>
Hier ist ein weiteres Beispiel für die Positionierung des Textes über einem Bild mit CSS.
Code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.container {
position: relative;
}
.text {
position: absolute;
color: white;
top: 5px;
}
</style>
</head>
<body>
<h2> Positioning the text over image</h2>
<div class="container">
<img src="/img/DelftStack/logo.png" alt="DelftStack Logo">
<h4 class="text"> Add any text to the image </h4>
</div>
</body>
</html>