Taustakuvan tummentaminen nettisivuilla on hyödyllistä, kun halutaan luoda kontrastia niin että esimerkiksi teksti erottuu selvästi taustasta.

Yksi yleisimmin nähtävistä tavoista on lisätä ylimääräinen div-elementti taustan ja sisällön väliin, ja sen jälkeen määritellä osittain läpinäkyvä taustaväri (esimerkiksi rgba(0, 0, 0, 0.7)) tälle div-elementille.

Edellä mainitussa tavassa ongelmana on tietysti saada tämä ylimääräinen div-elementti vetäytymään kokonaan taustakuvan ylle, joka voi olla hankalaa joissain tilanteissa, vaikka miten yrittäisi position-, width- ja height-ominaisuuksien kanssa säätää.

Itse olen todennut kaikista toimivimmaksi tavaksi käyttää CSS:n box-shadow-ominaisuutta, joka määritellään suoraan sille elementille, jossa myös taustakuva sijaitsee.

Esimerkki:

<section class="hero">
  Tekstisisältö, jonka haluat erottuvan taustasta
</section>

CSS:

.hero {
  color: #fff;
  font-size: 64px;
  background-image: url('kuva.png');
  background-size: cover;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.80) inset;
}

Tässä siis määritellään tekstin väriksi valkoinen (#fff), fonttikooksi 64 pikseliä ja taustakuvaksi kuva.jpg, jonka halutaan peittävän koko elementti (cover).

Ominaisuudella box-shadow määritellään varjostus jonka sijainti on horisontaalisesti 0 ja vertikaalisesti 0, sumennus eli blur samoin 0. Varjostuksen kooksi määritellään 100vmax joka tarkoittaa käytännössä (hieman oikaisten), että varjon halutaan peittävän koko elementti. Väriksi määritellään RGB-arvo (0, 0, 0) eli musta, ja läpinäkymättömyydeksi 0.80 eli vain 20 prosentin läpinäkyvyys.

Tämä menetelmä toimii kaikilla moderneilla selaimilla.