Quante volte avete avuto la necessità di scurire (o schiarire) un’immagine di sfondo? Ad esempio per poter mettere un testo ben visibile sopra l’immagine.

La prima soluzione che vi viene in mente è sicuramente quella di passare per classici programmi di grafica e applicare un filtro all’immagine. Sicuramente è una soluzione più che valida, ma che porta con se qualche aspetto negativo:

• Altera l’immagine finale
• Richiede l’uso di strumenti esterni (programmi di grafica)

In questo breve articolo vi spiego come ottenere lo stesso risultato ma utilizzando il solo codice CSS.

Con il CSS si può

L’uso del CSS non solo vi sgrava dall’utilizzo di altri programmi ma soprattutto non altera l’immagine iniziale. L’obbiettivo infatti è quello di applicare un vero e proprio “overlay” (copertura) sopra l’immagine con una opacità più o meno netta.

Per fare questo mi avvarrò di 2 elementi CSS: il position absolute e soprattutto i pseudolemeneti CSS3 ::before (o ::after).

Prepariamo l’HTML

L’obbiettivo di questo esercizio è quello di creare una speci di “hero section”, cioè una sezione con un’immagine di sfondo è il testo in sovra impressione, un po’ come questo qui sotto:

Preparo prima di tutto l’HTML, che potete vedere qui sotto. Notare che ho creato all’interno di #hero un altro div che mi servirà per mettere il testo in primo piano. Poi capiremo meglio perchè

<section id="hero">
  <div class="inner">
    <h1>Hello World!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...] posuere ipsum semper tincidunt.</p>
  </div>
</section>

E ora passiamo al CSS

Prima di tutto preparo la mia #hero section decidendo una dimensione in altezza (nel nostro caso creiamo una sezione a tutto schermo). Sempre in questo elemento carico l’immagine di sfondo. Notare che ho reso l’elemento un box “flex”, cosi da poter centrare verticalmente il suo contenuto (il testo).

#hero {
  position: relative;
  height: 100vh;
  background: url('https://picsum.photos/seed/picsum/1920/1080') no-repeat center;
  background-size:cover;
  color: #ffffff;

  display: flex;
  align-items: center;
  padding: 0 60px;
}

Ora lavoro sul pseudoelemento #hero::before. Questi “elementi” sono generati nell’HTML dal foglio di stile e non fanno realmente parte del codice sorgente originario. Sono utili quando abbiamo necessità di avere elementi HTML con soli scopi stilistici/grafici. E questo è proprio il caso nostro.

#hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

Come vedete, ho prima di tutto creato l’elemento, attraverso la proprietà content:”; (fondamentale perchè si generi effettivamente il pseudoelemento), per poi posizionarlo in maniera assoluta sull’elemento padre e assicurandomi che occupi tutto lo spazio disponibile. Infine, sono andato a dare uno sfondo nero con opacità al 20%.

Così facendo è come se avessi aggiunto un nuovo livello sopra all’immagine di sfondo con lo scopo di scurirla.

Per concludere, do un position:relative; all’elemento .inner. Questo passaggio è importante, altrimenti rischiamo che l’overlay creato con il psaudoelemento vada sopra al testo (rendendo il testo grigio invece che bianco).

E il gioco è fatto! Semplice vero?

Un altro vantaggio non detto in precedenza e la flessibilità di questa soluzione: posso infatti modificare velocemente la percentuale di opacità (o il colore) senza dover riaprire ogni volta il programma di grafica. Vi basterà infatti agire sul background-color del pseudoelemento.

Che dite, può essere utile? Usavate già questa tecnica?