background-blend-modeプロパティの説明
CSSのbackground-blend-modeプロパティは、背景色や背景画像の描画モードを指定します。これは複数の背景色素があった場合に、互いに合成させる機能を提供します。
描画モードは、レイヤー状に重なった色や画像をどのように合成するかを指示する機能です。その効果は、重なり合った色素の前後関係によっても出力結果が変わります。
CSSの背景指定は、先頭に記述されたものを一番手前に表示し、順に下へ重なるように配置します。最終的に一番最後となった背景画像にのみ背景色を指定できます。つまり、単純な描画モードの指定であれば、一枚の背景画像に一種類の背景色を重ねることになります。
ここでは合成される側の色素を基本色、合成する側の色素を合成色と呼びます。
background-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（輝度）- 基本色の色相と彩度を残し、明度を合成色のものに置き換えます。
background-blend-modeの使い方とサンプルコード
background-blend-modeプロパティの構文は以下の通りです。
/* キーワード値 */
background-blend-mode: normal;
background-blend-mode: multiply;
background-blend-mode: overlay;
/* 背景ごとに指定 */
background-blend-mode: screen, color;
/* グローバル値 */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: revert;
background-blend-mode: unset;
background-blend-modeの実例
それでは実際に描画モードの違いを比較してみましょう。各モードの名前の書かれたボタンを押すと、合成結果の見た目が変わります。
背景色を複数指定する場合は、先頭に記述した内容が一番手前に表示されます。よって基本色を奥に敷いて、合成色を手前に重ねるは、合成色の方から記載する必用があります。
/* 背景色の指定 */
.item_hoge {
background: linear-gradient(#fff, 75%, #000), #f00;
background-blend-mode: $hoge;
}
写真に合成用の色素を重ねて描画モードを変更すると、それぞれ特徴的なフィルタ効果が得られます。これは画像同士を重ねた場合も有効です。このような機能が、画像編集ソフトを使わなくても簡単に再現できるようになりました。