¿Cómo crear: Bloque de texto en la imagen

Aprende a放置 texto en el bloque de imagen.

¿Cómo放置 texto en el bloque de imagen?

Primer paso - Añadir HTML:

<div class="container">
  <img src="nature.jpg" alt="Noruega" style="width:100%;">
  <div class="text-block">
    <h4>Wuhan</h4>
    <p>¡Qué gran ciudad! La amo!</p>
  </div>
</div>

Segundo paso - Añadir CSS:

/* Contenedor que incluye imágenes y texto */
.container {
  position: relative;
}
/* Texto en la esquina derecha inferior */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

Prueba por ti mismo

Páginas relacionadas

Tutoriales:CSS de imagen

Tutoriales:CSS de posicionamiento