mix-blend-modeについて

DOMエレメントを重ねた時の見え方を指定するCSSプロパティ

PhotoshopやIllustratorで使うオーバーレイがcssできる

対応状況

参考：https://caniuse.com/#search=mix-blend-mode

Safariの一部、IE, Edgeはサポートしていない

ブレンドモードとは？

レイヤーを重ねたときに上位のレイヤーを下位のレイヤーにどのように重ねて表示するかの設定。
アドビ系のソフトで昔から搭載されている。

↑photoshopだと通常の部分

書き方

.pt-1 {
  mix-blend-mode: difference;
}

のように記入する。
背景画像のみに適応させたい場合には

.back-only { 
  background:green url(images/img01.jpg) no-repeat;
  background-blend-mode: multiply; 
}

のように記入する。

使用できるものについて

名称	プロパティ	意味
通常	normal	通常のまま
乗算	multiply	色と色が重なる部分を暗くする描画モード。重ねれば重ねるほど暗く。
スクリーン	screen	色と色が重なる部分を明るくする描画モード。重ねれば重ねるほど明るくなる
オーバーレイ	overlay	下のレイヤーの色が暗いと「乗算」、明るいと「スクリーン」が適用される描画モード
比較（暗）	darken	重なる部分の両方の色をくらべて、暗い方が適用される描画モード
比較（明）	lighten	重なる部分の両方の色をくらべて、明るい方が適用される描画モード
覆い焼き	color-dodg	色味(色相)を保ちながら、色と色が重なる部分を明るくし、コントラストを強くする描画モード
焼き込み	color-burn	色味(色相)を保ちながら、色と色が重なる部分を暗くし、コントラストを強くする描画モード
ハードライト	hard-light	オーバーレイよりもコントラストが弱い描画モード
ソフトライト	soft-light	オーバーレイよりもコントラストが強い描画モード
差の絶対値	difference	明度の大きい方から小さい方の数値が引かれて合成される描画モード。白を重ねた場合は単純に色が反転し、黒を重ねた場合は何の影響もない
除外	exclusion	差の絶対値よりもコントラストが弱い描画モード
色相	hue	下のレイヤーの輝度と彩度を維持したまま、上のレイヤーの色相を合成する描画モード
彩度	saturation	下のレイヤーの輝度と色相を維持したまま、上のレイヤーの彩度を合成する描画モード
カラー	color	下のレイヤーの輝度を維持したまま、上のレイヤーの色相と彩度を合成する描画モード
彩度	luminosity	上のレイヤーの色の輝度が、下のレイヤーに合成される描画モード

ブラウザで検証したいときに

mix-blend-mode