CSS「mix-blend-mode」で画像の乗算加工を実装する

画像に文字を載せる際に文字を読みやすくするためや、画像の印象を変える際等に「乗算」加工を施す場合があります。
以前は、画像を事前に加工していたり、透過処理で似たような効果を得ていたのですが、CSSの「mix-blend-mode」で乗算加工ができるようになっていたのでメモ。

HTML

<div class="image_wrap">
<figure><img src="○○.jpg"></figure>
<div class="blend-wrap">
<p>乗算の上に乗せた文字</p>
</div>
</div>

CSS

.image_wrap {
	position: relative;
	display: inline-block;
}
.blend-wrap p {
	color: #fff;
	position: relative;
	z-index: 1;
}
.blend-wrap {
	padding: 2rem;
	position: absolute;
	right: 0;
	bottom: 0;
}
.blend-wrap::before {
	content: '';
	background: #093177;
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

乗算の適応範囲が子要素まで及ぶので、使用する際には疑似要素（::before等）を使うなどの工夫が必要です。

SAMPLE

下記は画像加工の方法による実際の見え方の比較です。
色は同じものを使用していますが、透過は合成の仕方が異なるため、若干見え方が異なります。

画像加工で乗算をしたもの（50％透過）

CSSで透過したもの（50％透過）

CSSで乗算したもの（50％透過）

なお、プロパティーの値には乗算の他にも画像加工で付与できる効果が一通り設定できるようです。

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

• 乗算などのブレンドモードはCSSの「mix-blend-mode」で解決
• Photoshopの乗算とは一体何が起きているのか？