WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： かじかじ
カテゴリー： マークアップ >CSS

PhotoshopやIllustrator等の画像編集ソフトで使用できる、ブレンドモード（描画モード）。
「mix-blend-mode」プロパティを使えば、CSSでも設定ができます。
今回はそんな便利な「mix-blend-mode」プロパティをご紹介します。

ブレンドモード（描画モード）とは？

ブレンドモードとは、レイヤーを重ねたときにどのように重ねて表現するかの設定のことです。

Photoshopだと上記のようにブレンドモードの設定を変更できます。

mix-blend-modeプロパティの種類

mix-blend-modeプロパティには、下記の16種類があります。

• ・normal – 通常
• ・multiply – 乗算
• ・screen – スクリーン
• ・overlay – オーバーレイ
• ・color-dodge – 覆い焼き
• ・color-burn – 焼き込み
• ・darken – 比較（暗）
• ・lighten – 比較（明）
• ・hard-light – ハードライト
• ・soft-light – ソフトライト
• ・difference – 差の絶対値
• ・exclusion – 除外
• ・hue – 色相
• ・saturation – 彩度
• ・color – カラー
• ・luminosity – 輝度

デフォルトの値はnormalです。

normal（通常）

.normal{
mix-blend-mode: normal;
}

multiply（乗算）

.multiply{
mix-blend-mode: multiply;
}

screen（スクリーン）

.screen{
mix-blend-mode: screen;
}

overlay（オーバーレイ）

.overlay{
mix-blend-mode: overlay;
}

soft-light（ソフトライト）

.soft-light{
mix-blend-mode: soft-light;
}

まとめ

今回のように画像にベタ塗りの要素を重ねる以外にも、
画像同士を重ねるときにも使えて便利なので、ぜひ使ってみてください！