Come creare: immagine di sfondo sfocata

Impara come creare un'immagine di sfondo sfocata utilizzando CSS.

Come creare un'immagine di sfondo sfocata

primo passo - Aggiungi HTML:

<div class="bg-image"></div>
<div class="bg-text">
  <h1Sono Bill Gates</h1>
  <p>E sono un fotografo</p>
</div>

secondo passo - Aggiungi CSS:

corpo, html {
  altezza: 100%;
}
* {
  box-sizing: border-box;
}
.bg-image {
  /* Immagine utilizzata */
  immagine-di-sfondo: url("photographer.jpg");
  /* Aggiungi un effetto sfocatura */
  filtro: sfocatura(8px);
  -webkit-filtro: sfocatura(8px);
  /* Altezza completa */
  altezza: 100%;
  /* Centra l'immagine e la scala appropriatamente */
  posizione-di-sfondo: centro;
  ripetizione-di-sfondo: senza-ripetizione;
  dimensione-di-sfondo: coprire;
}
/* Posiziona il testo al centro della pagina / immagine */
.bg-text {
  colore-di-sfondo: rgb(0,0,0); /* colore di fallback */
  colore-di-sfondo: rgba(0,0,0, 0.4); /* trasparente nero semi-opaco / trasparente */
  colore: bianco;
  peso-testo: bold;
  bordo: 3px solid #f1f1f1;
  posizione: assoluto;
  alto: 50%;
  sinistro: 50%;
  trasformazione: translate(-50%, -50%);
  z-index: 2;
  larghezza: 80%;
  padding: 20px;
  text-align: center;
}

Prova personalmente