今回はブレンドモードを表現するmix-blend-modeプロパティについて解説します。
ブレンドモードとは？
ブレンドモードとは、２つのレイヤーを重ねた際に、どのように合成されるかの設定のことです。
別名、レイヤーの合成モード、描写モードとも呼ばれます。
mix-blend-modeとは？
mix-blend-modeはcss3の新プロパティです。
mix-blend-modeプロパティを使用することで、cssでブレンドモードを表現することができます。
mix-blend-modeで使用される値
乗算
mix-blend-modeプロパティで最も使用される値は乗算です。
乗算は色の掛け算をするというようなイメージで、２つのレイヤーの色を掛け合わせた色が表現されます。
乗算の値は「multiply」です。
以下のように指定します。
mix-blend-mode: multiply;
mix-blend-modeの他の値
mix-blend-modeには他にも多くの値が用意されています。
詳細はこちらの記事をご覧ください。
mix-blend-modeの使用例
mix-blend-modeの使用例はこちらです。
２つのレイヤーが重なっている部分に乗算が効いています。
See the Pen
Untitled by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.
まとめ
mix-blend-modeプロパティによって、cssでブレンドモードを再現できるようになりました。
よりコーディングの幅を拡げるため、mix-blend-modeプロパティを使いこなせるようにしましょう!
