背景画像に文字を重ねると、画像の色が濃くて文字が見づらい場合があります。
Before
文字の色は変えないまま、背景を薄くする（明るくする、透過させる）ためには、以下のようにします。
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>背景画像を薄くする</title><linkrel="stylesheet"href="style.css"></head><body><h1>夢に、向かって。</h1></body></html>style.css
body{background-image:url(bgimage.jpg);background-color:rgba(255,255,255,0.5);background-blend-mode:lighten;}h1{color:#666666;font-size:64px;padding:128px;}background-colorプロパティで0.5、つまり50%の白を指定し、background-blend-mode: lighten;で明るくするように色を重ね合わせます。
rgbaの0.5という透過度の指定は、0.7など大きくすれば、もっと薄く白っぽくなりますし、0.3など小さくすれば元の画像が濃くなります。
こうすると背景画像が薄くなり、文字が見やすくなります。
After