Come crearlo: immagine con testo trasparente

Impara come creare immagini con testo di sfondo trasparente (semitrasparente) utilizzando CSS.

Testo di immagine trasparente

Norway
Intestazione

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.

Prova personalmente

Come creare testo di immagine trasparente

Primo passo - Aggiungi HTML:

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

Secondo passo - Aggiungi CSS:

.container {
  position: relative;
  max-width: 800px; /* Larghezza massima */
  margin: 0 auto; /* Centra */
}
.container .content {
  position: absolute; /* Posizionamento del testo di sfondo */
  bottom: 0; /* Sotto. Usa top:0 per attaccarlo in alto */
  background: rgb(0, 0, 0); /* Colore di fallback */
  background: rgba(0, 0, 0, 0.5); /* Sfondo nero opaco 0.5 */
  color: #f1f1f1; /* Testo grigio */
  width: 100%; /* Intera larghezza */
  padding: 20px; /* Alcuni margini interni */
}

Prova personalmente