Cómo crear: colocar texto en una imagen

Aprende cómo colocar texto en una imagen.

Cómo colocar texto en una imagen

Primer paso - Añadir HTML：

<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Abajo a la izquierda</div>
  <div class="top-left">Arriba a la izquierda</div>
  <div class="top-right">Arriba a la derecha</div>
  <div class="bottom-right">Abajo a la derecha</div>
  <div class="centered">Centrado</div>
</div>

Segundo paso - Añadir CSS：

/* Container that includes images and text */
.container {
  position: relative;
  text-align: center;
  color: white;
}
/* Text at the bottom left */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}
/* Text at the top left */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}
/* Text at the top right */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
/* Text at the bottom right */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}
/* Aligned Chinese text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Prueba personalmente

Páginas relacionadas

Tutoriales:CSS de imagen

Tutoriales:CSS de posicionamiento