Posicionar texto sobre una imagen con CSS
En algunos casos, se pueden agregar textos a las fotos en una página web y se pueden crear leyendas de imágenes a partir del texto de la imagen. El texto no se puede colocar sobre una imagen utilizando únicamente componentes HTML.
Se requerirán atributos CSS para esto. Este tutorial mostrará cómo colocar texto sobre una imagen con CSS.
Posicionar texto sobre una imagen con CSS
El texto sobre la imagen puede posicionarse utilizando el atributo de posición de CSS. Para ello, hay que proporcionar a la imagen position:relative y al texto position:absolute.
Dentro de un elemento <div>, agregue ambos componentes. Podemos usar las propiedades superior, inferior, izquierda y derecha para colocar el texto en la imagen en una ubicación determinada.
Código:
<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>
Aquí hay otro ejemplo de cómo colocar el texto sobre una imagen con CSS.
Código:
<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>