要素の内容が背景とどのように混ざり合うかを指定するプロパティです。Photoshopのブレンドモードと同様の効果。
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | ...| mix-blend-multiply | mix-blend-mode: multiply |
| mix-blend-screen | mix-blend-mode: screen |
一般形: mix-blend-{mode}
mix-blend-mode: multiply;乗算合成（暗くなる）
mix-blend-mode: screen;スクリーン合成（明るくなる）
mix-blend-mode: difference;差の絶対値合成
テキストと画像を重ねて見やすくしたり、デザイン性の高いエフェクトを作成できる。multiply、screen、overlayがよく使われる。
親要素にisolation: isolate;がないと、予期しない要素ともブレンドされる。パフォーマンスに影響する場合がある。
「効かない」原因の多くは重なる相手が不透明な背景を持たないこと、または意図しない要素とまで混ざることです。混ざる範囲を区切るには親にisolation: isolateを指定します——このセット運用をAIは省略しがちです。白背景ではmultiply、黒背景ではscreenが基本、という選び方も添えると良いコードになります。
写真の上のロゴを背景と自然に馴染ませたい。mix-blend-modeとisolationのセットで、混ざる範囲を制御して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。