背景画像と背景色、または複数の背景画像同士のブレンド方法を指定するプロパティです。multiply、screen、overlay等の値があり、Photoshopのようなブレンド効果を実現できます。
background-blend-mode: normal | multiply | screen | overlay | ...| bg-blend-multiply | background-blend-mode: multiply |
| bg-blend-overlay | background-blend-mode: overlay |
一般形: bg-blend-{mode}
background-blend-mode: multiply;背景画像を乗算合成
background-blend-mode: screen;背景画像をスクリーン合成
画像にカラーオーバーレイをかけたり、デュオトーン効果を作成できる。filterと組み合わせるとさらに多彩な表現が可能。
background-colorも指定しないと効果が分かりにくい場合がある。mix-blend-modeとの違いに注意。
mix-blend-mode（要素同士）とbackground-blend-mode（同一要素内の背景レイヤー同士）の混同はAIの定番です。「写真に色を被せるダブトーン」は背景画像+背景色をbackground-blend-modeで混ぜるのが正攻法で、要素を重ねる必要はありません。
ヒーロー写真をブランドカラーのダブトーン風にしたい。要素を重ねずbackground-blend-modeで実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。