background-blend-mode・mix-blend-mode

background-blend-mode

<main>
    <section>
        <h1>headline</h1>
    </section>
</main>

main {
    background-color: blue;
}
section {
    background-blend-mode: hard-light;
    background-image: url('../xxx.jpg');
    background-color: purple;
}

background-blend-modeはsection内の背景色purpleと背景画像jpgの色の混ざり方を指定します

指定できる値（ブレンドモード）は、

normal（通常） darken（比較(暗)） multiply（乗算） color-burn（焼き込み） lighten（比較(明)） screen（スクリーン） color-dodge（覆い焼き） overlay（オーバーレイ） soft-light（ソフトライト） hard-light（ハードライト） difference（差の絶対値） exclusion（除外） hue（色相） saturation（彩度） color（カラー） luminosity（輝度）

mix-blend-mode

<main>
    <section>
        <h1>headline</h1>
    </section>
</main>

main {
    background-color: blue;
}
section {
    background-blend-mode: hard-light;
    background-image: url('../xxx.jpg');
    background-color: purple;
    
    mix-blend-mode: hard-light; <--追加
}

mix-blend-modeは親要素mainと子要素sectionの色の混ざり方を指定します