<blend-mode>

概要

<blend-mode> 型は、ブレンドモードを表すキーワードのコレクションです。

ブレンドモードは、レイヤーが重なったときにピクセルの最終的な色の値を計算する方法です。それぞれのブレンドモードは前景と背景の色の値 (それぞれトップカラー、ボトムカラーと呼びます) を取得して、計算を行って色の値を返します。最終的に見えるレイヤーは、ブレンドしたレイヤーの中で重なっているすべてのピクセルで、ブレンドモードの計算を行った結果です。

構文

形式文法: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

使用可能な値

normal

ボトムカラーがどのような色でも、トップカラーが最終的な色になります。
この効果は、2 枚の不透明な紙片を重ねた状況に似ています。

multiply

トップカラーとボトムカラーで乗算を行った結果が、最終的な色になります。
黒いレイヤーは、最終的に黒色のレイヤーへ近づけます。白いレイヤーは変化をもたらしません。
この効果は、透明なフィルムに印刷した画像を重ねた状況に似ています。

screen

色を反転して乗算を行い、さらに色を反転した結果が最終的な色になります。
黒いレイヤーは変化をもたらしません。白いレイヤーは、最終的に白色のレイヤーへ近づけます。
この効果は、2 つの画像を投影スクリーンに映した状況に似ています。

overlay
ボトムカラーが暗い色であれば multiply、明るい色であれば screen の結果が最終的な色になります。
このブレンドモードは hard-light と同じですが、レイヤーが入れ替わっています。

darken

カラーチャンネルごとに暗い方の値で構成した色が、最終的な色になります。

lighten

カラーチャンネルごとに明るい方の値で構成した色が、最終的な色になります。

color-dodge

ボトムカラーを、反転したトップカラーで除算した結果が、最終的な色になります。
黒い前景は変化をもたらしません。背景色を反転した色を持つ前景は、完全に明るい色に導きます。
このブレンドモードは screen に似ていますが、完全に明るい色に近づけるためには背景色を反転した色と同程度に明るい前景が必要です。

color-burn

反転したボトムカラーをトップカラーで除算して、さらに反転した結果が最終的な色になります。
白い背景は変化をもたらしません。背景色を反転した色を持つ前景は、最終的に黒い画像へ近づけます。
このブレンドモードは multiply に似ていますが、最終的に画像を暗くするためには背景色を反転した色と同程度に暗い前景が必要です。

hard-light

トップカラーが暗い色であれば multiply 、明るい色であれば screen の結果が最終的な色になります。
このブレンドモードは overlay と同じですが、レイヤーが入れ替わっています。
この効果は、背景に強烈なスポットライトを当てた状況に似ています。

soft-light

最終的な色は hard-light に似ていますが、よりソフトになります。
このブレンドモードは hard-light に似ています。
この効果は、背景に拡散光のスポットライトを当てた状況に似ています。

difference

2 つの色のうち明るい色から、暗い色を減算した結果が最終的な色になります。
黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。

exclusion

最終的な色は difference に似ていますが、コントラストが低くなります。
difference と同様に、黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。

hue

最終的な色はトップカラーの色調を持ちますが、 彩度および明度はボトムカラーの値を使用します。

saturation

最終的な色はトップカラーの彩度を持ちますが、色調および 明度はボトムカラーの値を使用します。
彩度を持たない純粋なグレーの背景は、効果がありません。

color

最終的な色はトップカラーの色調および彩度を持ちますが、明度はボトムカラーの値を使用します。
この効果はグレーレベルを保持しており、前景に色をつけるために使用できます。

luminosity

最終的な色はトップカラーの明度を持ちますが、色調および 彩度はボトムカラーの値を使用します。
このブレンドモードは color と同じですが、レイヤーが入れ替わっています。

ブレンドモードの補間

ブレンドモードを変更するとき、補間処理は行いません。すべての変更は、急に発生します。

仕様

仕様書 策定状況 コメント
Compositing and blending Level 1
<blend-mode> の定義
勧告候補 最初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 35 (有) ? ? ?
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? (有) ? ? ?

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,