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:

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.

El resultado final será el siguiente:

Cómo recortar una imagen en Photoshop

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.

Suscríbete a nuestra lista de correo

Etiquetas:,

Publicidad

Deje un comentario