CSS: aggiungere un livello sfumato (ombra scura) alle immagini di sfondo per rendere leggibile il testo

A volte il testo o la didascalia su un’immagine non è leggibile, a seconda del contrasto cromatico tra l’elemento in primo piano e lo sfondo. Prima modificavo l’immagine per renderla più scura o più chiara, così che il testo HTML risaltasse e fosse leggibile per gli utenti, ma ecco una soluzione molto più semplice con poche righe di CSS!

HTML

Copia il codice qui sotto e incollalo nel tuo documento HTML.

<div class="hero-outer">
    <div class="hero-inner">
        <p>CSS Gradient</p>
    </div>
</div>

CSS

Copia il codice qui sotto e incollalo nel tuo documento CSS.

.hero-outer { position:relative; }
.hero-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: linear-gradient(to bottom, #000, transparent);
    opacity: 0.5;
}
.hero-inner { 
    background: url('https://identitydesign.us/wp-content/uploads/2026/11/300x200-gradient-1.jpg'); 
    width:100%;
    height: 400px;
    background-size:cover;
}
.hero-inner p { 
    color:#fff; 
    position:relative; 
    font-size: 50px !important; 
    padding-right: 40px;
    text-align: right;
    top: 20px;
    z-index: 1;
}