Helppo taustakuvan tummennus CSS:llä
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.