mix-blend-mode

背景・装飾

要素の内容が背景とどのように混ざり合うかを指定するプロパティです。Photoshopのブレンドモードと同様の効果。

構文

Syntax
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | ...

コード例

1

mix-blend-mode: multiply;
実行結果
TEXT
multiply - 乗算(暗くなる)

乗算合成(暗くなる)

2

mix-blend-mode: screen;
実行結果
TEXT
screen - スクリーン(明るくなる)

スクリーン合成(明るくなる)

3

mix-blend-mode: difference;
実行結果
TEXT
difference - 差の絶対値(反転効果)

差の絶対値合成

💡 TIPS

テキストと画像を重ねて見やすくしたり、デザイン性の高いエフェクトを作成できる。multiply、screen、overlayがよく使われる。

⚠️ よくある間違い

親要素にisolation: isolate;がないと、予期しない要素ともブレンドされる。パフォーマンスに影響する場合がある。

関連プロパティ

ブラウザサポート

Chrome 41+, Firefox 32+, Safari 8+