Cómo poner texto encima de una imagen con HTML/CSS

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.

Cómo poner texto encima de una imagen con HTML/CSS

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:

Texto
Texto Centrado

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.

Si tienes algun problema, déjanos un comentario.


También te interesaría...

Suscríbete a nuestra lista de correo

Etiquetas:,

Deje un comentario