以前の記事、「CSS3のブレンドモードbackground-blend-modeとイラレで作成したものを比較してみると分かる事」では２種類あるCSSブレンドモードの片方だけを紹介してきました

今回はもう１つのブレンドモードである「mix-blend-mode」を紹介していきたいと思います。

ブレンドモードとは？

そもそも、ブレンドモードとは
デザインなどクリエイティブなものを作る上で使う基本機能の１つとなります。
要素と要素を重ねて表示する際の設定となります。

ソフトによっては「ブレンドモード」ではなく様々な名称が使われています。
本記事では「ブレンドモード」と記載して書いていきます。

mix-blend-modeの表現力

では下記でどのようなものなのか、どのようなオプションがあるのか紹介していきます。

今回は背景画像の上にテキストを乗せて紹介していきます。
mix-blend-modeはテキストのpタグに適応しています。

プルダウンメニューよりオプションを選択可能です。

p {
    mix-blend-mode: normal
}

mix-blend-mode概要

初期値

normal

適用対象

すべての要素。SVGでは、コンテナ要素、グラフィックス要素、グラフィックス参照要素に適用される

値の継承

しない