mix-blend-mode：重なり合った要素の内容と背景に対して描画モードを指定する

mix-blend-modeプロパティの説明

mix-blend-modeは、重なり合った要素の内容と背景に対して描画モードを指定します。これは画像編集ソフトなどに実装されている、複数のレイヤーを重ねた画像を処理する仕組みに相当します。

例えば、背景色の塗られた親要素の中に画像を配置したとします。通常は、画像が持つ色調は背景色の影響を受けませんが、双方の色調データを混ぜ合わせて様々な結果を表現します。

似たようなプロパティにbackground-blend-modeがあります。こちらは背景の処理に特化したものです。

mix-blend-modeに指定できる値

<blend-mode>

重なった要素を混合する方式を表す値です。あらかじめ定義されているキーワードを使って指定します。内容は以下の通りです。

normal

重なった色素の手前にある方が表示されます。背後に隠れた色は描画されません。

multiply（乗算）

基本色に合成色を乗算します。最終的に色素は元の色よりも濃く暗くなります。黒は黒のまま、白は合成色に上書きされます。

screen（スクリーン）

重なった要素の色素を反転して互いに乗算し、それを再度反転したものを描画します。最終的に色素は元の色よりも薄く明るくなります。これはスクリーンに複数の映像を重ねて投影した時の効果に似ています。

overlay（オーバーレイ）

基本色と合成色を比較し、暗い部分を乗算、明るい部分をスクリーンで合成します。これにより暗いところはより暗く、明るいところはより明るくなります。

darken（比較暗）

基本色と合成色を比較し、より暗い方を採用します。

lighten（比較明）

基本色と合成色を比較し、より明るい方を採用します。

color-burn（焼き込みカラー）

合成色の色に応じて基本色の明度を下げ、彩度を上げます。白を合成しても効果はありません。木目や革製品のテクスチャに焼印を押した時のような表現で良く使われます。

color-dodge（覆い焼きカラー）

合成色の色に応じて基本色の明度を上げ、彩度を下げます。黒を合成しても効果はありません。ガラス製品や宝石など明るい箇所を際立たせたい時などに活用されます。

hard-light（ハードライト）

合成色が50%のグレーよりも暗ければ乗算、明るければスクリーンで処理します。

soft-light（ソフトライト）

合成色が50%のグレーよりも暗ければ焼き込みカラーのように暗くなり、明るければ覆い焼きカラーのように明るくなります。

difference（減算）

基本色と合成色を比較し、明るい色から暗い色を減算します。黒い色素は変化しませんが、白い色素はもう一方の色素の影響を受けます。

exclusion（除外）

基本色と合成色を比較し、明るさの値の大きい方から小さい方の色を除外します。黒い色素は変化しませんが、白い色素はもう一方の色素の影響を受けます。

hue（色相）

基本色の明度と彩度を残し、色相を合成色のものに置き換えます。

saturation（彩度）

基本色の明度と色相を残し、彩度を合成色のものに置き換えます。

color（カラー）

基本色の明度を残し、色相と彩度を合成色のものに置き換えます。

luminosity（輝度）

基本色の色相と彩度を残し、明度を合成色のものに置き換えます。

mix-blend-modeの使い方とサンプル

mix-blend-modeプロパティの構文は以下の通りです。

/* キーワード値 */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* グローバル値 */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: revert;
mix-blend-mode: unset;

mix-blend-modeの実例

それでは実際にmix-blend-modeプロパティの書き方を見ていきましょう。以下の例は、背景画像が敷かれた要素の上に別の要素を位置指定で重ねた時の挙動です。上に重なる要素は文字と背景を持っていますが、描画モードを変えるとそれぞれの効果が得られます。

.samp_box {
	position: relative;
	padding: 1rem;
	background-color: #eee;
	text-align: center;
}
.samp_box input[type="radio"] {
	display: none;
}
.samp_img {
	width: 100%;
	height: 300px;
	background: url(../images/sample_photo_1200x630.jpg) no-repeat;
	background-size: cover;
}
.samp_box > .result {
	display: none;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -2rem;
	width: 100%;
	background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
	font-size: 3rem;
	font-weight: bold;
}
#mbm_normal:checked ~ #item_normal {
	display: block;
	mix-blend-mode: normal;
}
#mbm_multiply:checked ~ #item_multiply {
	display: block;
	mix-blend-mode: multiply;
}
#mbm_screen:checked ~ #item_screen {
	display: block;
	mix-blend-mode: screen;
}
#mbm_overlay:checked ~ #item_overlay {
	display: block;
	mix-blend-mode: overlay;
}
#mbm_darken:checked ~ #item_darken {
	display: block;
	mix-blend-mode: darken;
}
#mbm_lighten:checked ~ #item_lighten {
	display: block;
	mix-blend-mode: lighten;
}
#mbm_color_burn:checked ~ #item_color_burn {
	display: block;
	mix-blend-mode: color-burn;
}
#mbm_color_dodge:checked ~ #item_color_dodge {
	display: block;
	mix-blend-mode: color-dodge;
}
#mbm_hard_light:checked ~ #item_hard_light {
	display: block;
	mix-blend-mode: hard-light;
}
#mbm_soft_light:checked ~ #item_soft_light {
	display: block;
	mix-blend-mode: soft-light;
}
#mbm_difference:checked ~ #item_difference {
	display: block;
	mix-blend-mode: difference;
}
#mbm_exclusion:checked ~ #item_exclusion {
	display: block;
	mix-blend-mode: exclusion;
}
#mbm_hue:checked ~ #item_hue {
	display: block;
	mix-blend-mode: hue;
}
#mbm_saturation:checked ~ #item_saturation {
	display: block;
	mix-blend-mode: saturation;
}
#mbm_color:checked ~ #item_color {
	display: block;
	mix-blend-mode: color;
}
#mbm_luminosity:checked ~ #item_luminosity {
	display: block;
	mix-blend-mode: luminosity;
}
.switch_box {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	margin-top: 1rem;
	text-align: center;
}
.switch_box > label {
	flex: 25%;
	display: inline-block;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: #09f;
	color: #fff;
	text-align: center;
	cursor: pointer;
}

<section class="samp_box">
	<input type="radio" name="s" id="mbm_normal" checked>
	<input type="radio" name="s" id="mbm_multiply">
	<input type="radio" name="s" id="mbm_screen">
	<input type="radio" name="s" id="mbm_overlay">
	<input type="radio" name="s" id="mbm_darken">
	<input type="radio" name="s" id="mbm_lighten">
	<input type="radio" name="s" id="mbm_color_burn">
	<input type="radio" name="s" id="mbm_color_dodge">
	<input type="radio" name="s" id="mbm_hard_light">
	<input type="radio" name="s" id="mbm_soft_light">
	<input type="radio" name="s" id="mbm_difference">
	<input type="radio" name="s" id="mbm_exclusion">
	<input type="radio" name="s" id="mbm_hue">
	<input type="radio" name="s" id="mbm_saturation">
	<input type="radio" name="s" id="mbm_color">
	<input type="radio" name="s" id="mbm_luminosity">
	<!--=== 背景画像 ===-->
		<div class="samp_img"></div>
	<!--/=== 背景画像 ===-->
	<div class="result" id="item_normal">normal</div>
	<div class="result" id="item_multiply">multiply</div>
	<div class="result" id="item_screen">screen</div>
	<div class="result" id="item_overlay">overlay</div>
	<div class="result" id="item_darken">darken</div>
	<div class="result" id="item_lighten">lighten</div>
	<div class="result" id="item_color_burn">color-burn</div>
	<div class="result" id="item_color_dodge">color-dodge</div>
	<div class="result" id="item_hard_light">hard-light</div>
	<div class="result" id="item_soft_light">soft-light</div>
	<div class="result" id="item_difference">difference</div>
	<div class="result" id="item_exclusion">exclusion</div>
	<div class="result" id="item_hue">hue</div>
	<div class="result" id="item_saturation">saturation</div>
	<div class="result" id="item_color">color</div>
	<div class="result" id="item_luminosity">luminosity</div>
</section>

<section class="switch_box" id="switch">
	<label for="mbm_normal">normal</label>
	<label for="mbm_multiply">multiply</label>
	<label for="mbm_screen">screen</label>
	<label for="mbm_overlay">overlay</label>
	<label for="mbm_darken">darken</label>
	<label for="mbm_lighten">lighten</label>
	<label for="mbm_color_burn">color-burn</label>
	<label for="mbm_color_dodge">color-dodge</label>
	<label for="mbm_hard_light">hard-light</label>
	<label for="mbm_soft_light">soft-light</label>
	<label for="mbm_difference">difference</label>
	<label for="mbm_exclusion">exclusion</label>
	<label for="mbm_hue">hue</label>
	<label for="mbm_saturation">saturation</label>
	<label for="mbm_color">color</label>
	<label for="mbm_luminosity">luminosity</label>
</section>