Cómo crear: Imagen con texto transparente

Aprende cómo usar CSS para crear imágenes con texto de fondo transparente (semitransparente).

Texto de imagen transparente

Norway
Encabezado

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

Prueba personal

Cómo crear texto de imagen transparente

Primer paso - Añadir HTML：

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Encabezado</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

Segundo paso - Añadir CSS：

.container {
  position: relative;
  max-width: 800px; /* Ancho máximo */
  margin: 0 auto; /* Centrarlo */
}
.container .content {
  position: absolute; /* Posicionar el texto de fondo */
  bottom: 0; /* En la parte inferior. Usa top:0 para adjuntarlo a la parte superior */
  background: rgb(0, 0, 0); /* Color de retroceso */
  background: rgba(0, 0, 0, 0.5); /* Fondo negro con opacidad 0.5 */
  color: #f1f1f1; /* Texto en gris */
  width: 100%; /* Todo ancho */
  padding: 20px; /* Algunos márgenes internos */
}

Prueba personal