background-blend-mode

背景・装飾

背景画像と背景色、または複数の背景画像同士のブレンド方法を指定するプロパティです。multiply、screen、overlay等の値があり、Photoshopのようなブレンド効果を実現できます。

構文

Syntax
background-blend-mode: normal | multiply | screen | overlay | ...

コード例

1

background-blend-mode: multiply;
実行結果
multiply - グラデーションとパターンを乗算

背景画像を乗算合成

2

background-blend-mode: screen;
実行結果
screen - 明るく混ざり合う効果

背景画像をスクリーン合成

💡 TIPS

画像にカラーオーバーレイをかけたり、デュオトーン効果を作成できる。filterと組み合わせるとさらに多彩な表現が可能。

⚠️ よくある間違い

background-colorも指定しないと効果が分かりにくい場合がある。mix-blend-modeとの違いに注意。

関連プロパティ

ブラウザサポート

Chrome 35+, Firefox 30+, Safari 8+