Personalmente utilizzo moltissimo gli overlay per migliorare la leggibilità del testo sopra un’immagine, ma che cos’è questo overlay?
In poche parole non è nient’altro che un** livello intermedio fra l’immagine e il testo**, un livello che va ‘opacizzare’ l’immagine per rendere più leggibile il testo.
Logicamente con l’overlay il testo risulta molto più leggibile, e secondo me l’immagnie è anche meno impattante, meno fastidiosa.
Farlo non è affatto difficile.
Basterà recarci all’interno del contenitore dell’immagine, in questo caso nel div con classe _sidebar _e aggiungere un elemento chiamato “overlay“
<div class="sidebar" style="background:url('https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80')"><br>
<div class="overlay"></div><br>
<div class="sidebar-inner"><br>
<div class="site-header"><br>
<h2>Nome Sito Web</h2><br>
<i>Lorem ipsum dolor sit amet</i><br>
</div><br>
</div><br>
</div>
Con l’html siamo a posto, ora spostiamoci nel nostro file CSS e dobbiamo solamente creare questa classe:
.overlay{<br>
position: absolute;<br>
top:0;<br>
left: 0;<br>
right: 0;<br>
bottom:0;<br>
background-color: rgba(0, 0, 0, 0.4);<br>
z-index: 2;<br>
width: 100%;<br>
height: 100%;<br>
}
E Voilà! Tutto finito!
Ora non resta che personalizzarla a piacere, cambiando il colore e il livello di opacità.
Buon codice!