En este tutorial de HTML & CSS te vamos a enseñar cómo poner texto encima de una imagen. Esto es algo muy útil para cualquier proyecto web y lo mejor es que es muy sencillo de lograr. Sigue leyendo para aprender cómo posicionar un texto encima de una imagen.
HTML: Establecer la estructura
Para este tutorial, vamos a utilizar los siguientes elementos:
- Un DIV contenedor con clase ‘contenedor’
- Una imagen
- Un DIV de texto con clase ‘texto-encima’
Es decir, vamos a crear un DIV y dentro de él vamos a tener los elementos de imagen y un DIV de texto. El código sería el siguiente:
<div class="contenedor"> <img src="URL DE IMAGEN" /> <div class="texto-encima">Texto</div> <div class="centrado">Centrado</div> </div>
Por el momento, solo tendríamos una imagen y abajo un texto. Hasta ahora no se vería el texto sobre la imagen.
Nota: He agregado otro DIV de texto con clase ‘centrado’. Este texto estará posicionado al medio de la imagen.
CSS: Indicar la posición del texto
Para colocar el texto sobre la imagen necesitamos usar CSS. Usaremos el siguiente código para lograr esa sobreposición.
.contenedor{
position: relative;
display: inline-block;
text-align: center;
}
.texto-encima{
position: absolute;
top: 10px;
left: 10px;
}
.centrado{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
El resultado final será el siguiente:
Comentarios
- Podemos cambiar la posición del DIV de texto, variando la variable de top y left en CSS.
- Podemos posicionar el DIV de texto con la variable de bottom y right en CSS.
