body要素の中のbackground-imageを透過したい

要素に透過フィルターをかけたいとき、img要素やdiv要素ならopacityを使うか、もしくはbackground-colorにrgba()関数を入れてあげればいいだけですが、background-imageにはこの方法が通用しません。

ピンクの壁紙の色を薄くしたいとして、こう書いても

body {
    background-image: url(背景画像URL);
    background-position: center center;
    background-size: auto;
    background-repeat: repeat;
    background-color: rgba(255, 255, 255, 0.5);
}

スン…ってされるし

body {
    background-image: url(背景画像URL);
    background-position: center center;
    background-size: auto;
    background-repeat: repeat;
    opacity: 0.5;
}

こう書くと、

そういうことではない。
※opacity()関数の正しい挙動ではある

ので、ここでの正解はこうです。

body {
    background-image: url(背景画像URL);
    background-position: center center;
    background-size: auto;
    background-repeat: repeat;
    background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: lighten;
}

background-blend-mode: lighten;を追加するだけです。
やったー！ミルキーカラーもかわいい！！

ちなみにbackground-blend-modeには画像の色を薄くするlighten以外にもたくさんのプロパティがあって、例えばこのように指定してあげると、

    background-color: #c4e3da;
    background-blend-mode: multiply;

こんなふうに色を変えることもできます。
いちいち元画像を編集するよりも直感的に調整できて便利だと思います。
他にもグラデーションをかけたり、アニメーションをプラスしたり、画像の上に別の画像を重ねて合成するなども可能。
私はこいつで1日遊べる。