合成とブレンディングレベル1

1. 導入

この小節は規範的ではありません。
本書の前半では、CSSで合成を制御するために使用されるプロパティについて説明します。後半では、Porter Duff合成とブレンディングのアルゴリズムについて説明します。

2. この文書の読み方

本書の各セクションは、特に指定がない限り規範的です。

2.1. モジュール間の相互作用

この仕様は、これらのプロパティが適用された要素の視覚的レンダリングに影響するCSSプロパティ群を定義します。これらの効果は、要素が視覚フォーマットモデル（[CSS21]）に従ってサイズや配置が決定された後に適用されます。これらのプロパティの値によっては、包含ブロックや積み重ねコンテキストが生成されることがあります。

background-blend-modeプロパティは、CSS背景と境界モジュール[CSS3BG]で定義されたプロパティも拡張します。

この仕様はまた、SVG 1.1 第14.2節単純アルファ合成（[SVG11]）と、CSS Color Module Level 4の単純アルファ合成（[CSS-COLOR-4]）で指定されたルールも強化します。

このモジュールはまた、globalCompositeOperation 属性も拡張します。

2.2. 値

この仕様は、CSSプロパティ定義の慣例（[CSS21]）に従います。本仕様で定義されていない値型は、CSS Level 2 Revision 1（[CSS21]）で定義されています。他のCSSモジュールは、これらの値型の定義を拡張することがあります。例えば、[CSS-COLOR-4]は、このモジュールと組み合わせることで、本仕様で使用される<color>値型の定義を拡張します。

プロパティ定義に記載された値に加えて、本仕様で定義される全てのプロパティはinheritキーワードも値として受け付けます。可読性のため、明示的には繰り返し記載していません。

3. CSSにおけるブレンディングの指定

3.1. グラフィカル操作の順序

合成モデルは、SVG合成モデル（[SVG11]）に従う必要があります：最初にフィルター効果が適用され、その後クリッピング、マスキング、ブレンディング、合成が適用されます。

3.2. HTMLに特有の動作

CSSで積み重ねコンテキストを作成するすべてのものは、‘isolated’グループとして扱われる必要があります。HTML要素自体はグループを作成しません。

ブレンディングが適用された要素は、その要素が属する積み重ねコンテキスト（[CSS21]）の下層コンテンツ全体とブレンドする必要があります。

HTML文書のルート要素はdocument elementです。

3.3. SVGに特有の動作

デフォルトでは、すべての要素は非isolatedグループを作成する必要があります。

ただし、SVGの特定の操作ではisolatedグループが作成されます。以下の機能のいずれかが使用された場合、グループはisolatedになる必要があります：

opacity（不透明度）
filters（フィルター）
3D transforms（2D transformsはisolatedを引き起こしてはならない）
blending（ブレンディング）
masking（マスキング）

SVGのルート要素はSVG要素です。

3.4. CSSプロパティ

3.4.1. mix-blend-modeプロパティ

ブレンドモードは、色とバックドロップを混合するために使用される式を定義します。この動作はブレンディングでより詳しく説明されています。

名前:	mix-blend-mode
値:	<blend-mode>
初期値:	normal
適用対象:	すべての要素。SVGでは、コンテナ要素、グラフィックス要素、グラフィックス参照要素に適用されます。[SVG11]
継承:	no
パーセンテージ:	N/A
算出値:	指定通り
正規順序:	文法通り
アニメーション型:	離散
メディア:	視覚

<blend-mode>プロパティの構文は以下の通りです：

<blend-mode> =
  normal |
  darken | multiply | color-burn |
  lighten | screen | color-dodge |
  overlay | soft-light | hard-light |
  difference | exclusion |
  hue | saturation | color | luminosity

normal以外のblendmodeを要素に適用すると、新たな積み重ねコンテキスト（[CSS21]）が確立される必要があります。このグループはその後、要素を含む積み重ねコンテキストとブレンド・合成されます。

テスト

以下のサンプルマークアップを例とします：

<body>
  <img src="ducky.png"/>
</body>

そして、次のスタイルルール：

body { background-color: lime; }

... は以下の結果を生成します：

ライム色の背景上に部分的に透明な画像

スタイルルールをブレンディングを含めるよう変更すると：

body { background-color: lime; }
img { mix-blend-mode: multiply; }

... 出力は画像が <body> 要素のライム色背景とブレンドされます。

ライム色の背景上に透明画像のブレンディング

次のsvgコードを例とします：

<svg>
  <circle cx="40" cy="40" r="40" fill="red"/>
  <circle cx="80" cy="40" r="40" fill="lime"/>
  <circle cx="60" cy="80" r="40" fill="blue"/>
</svg>

そして、次のスタイルルール：

circle { mix-blend-mode: screen; }

... 出力は3つの円がブレンディングされます。各円は下から上に描画されます。要素が重なる部分では、ブレンドモードによって色が変化します。

3つの円がscreenブレンドモードでブレンディングされる例

次のスタイルシートと文書断片：

body { background-color: lime; }
div { background-color: red; width: 200px; opacity: .95}
img { mix-blend-mode: difference; }

<body>
  <div>
     <img src="ducky.png"/>
  </div>
</body>

... <div> 要素の opacity の設定により積み重ねコンテキストが作成されています。これにより新しいグループが作成され、画像は <body> の色とブレンドされません。

積み重ねコンテキスト内でのブレンディングの例

画像がライム色とブレンドされていない点に注目してください。

以下のサンプルマークアップを例とします：

<body>
   <div>
     <p>overlayブレンディングをテキストに適用</p>
   </div>
</body>

そして、次のスタイルルール：

div { background-image: url('texture.png'); }
@font-face {
  font-family: "Mythos Std";
  src: url("http://myfontvendor.com/mythos.otf");
}
p {
  mix-blend-mode: overlay;
  font-family: "Mythos Std"
}

画像上にオーバレイブレンドが適用されたテキスト

3.4.2. isolationプロパティ

SVGでは、このプロパティは要素がisolatedかどうかを定義します。
CSSでは、isolation を isolate に設定すると、要素が積み重ねコンテキストになります。

デフォルトでは、要素は auto キーワードを使用し、isolatedではないことを意味します。ただし、積み重ねコンテキストの作成を引き起こす操作 [CSS21] は必ずグループをisolatedにする必要があります。これらの操作については「HTMLに特有の動作」および「SVGに特有の動作」で説明しています。

名前:	isolation
値:	<isolation-mode>
初期値:	auto
適用対象:	すべての要素。SVGでは、コンテナ要素、グラフィックス要素、グラフィックス参照要素に適用されます。[SVG11]
継承:	no
パーセンテージ:	N/A
算出値:	指定通り
正規順序:	文法通り
アニメーション型:	離散
メディア:	視覚

<isolation-mode> プロパティの構文は以下の通りです：

<isolation-mode> = auto | isolate

テスト

CSSでは、背景画像や img のコンテンツは必ずisolatedグループに描画されます。
たとえば、img タグでSVGファイルをリンクした場合、そのSVGのアートワークはコンテンツのバックドロップとブレンドされません。

SVGでは、mask は常にisolatedグループを作成します。

3.4.3. background-blend-modeプロパティ

各背景レイヤーのブレンディングモードを定義します。

各背景レイヤーは、要素の下にある背景レイヤーおよび要素の背景色とブレンドしなければなりません。背景レイヤーは、要素の背後にあるコンテンツとはブレンドせず、isolated groupに描画されたかのように振る舞う必要があります。

background-blend-modeプロパティの説明は以下の通りです：

名前:	background-blend-mode
値:	<blend-mode>#
初期値:	normal
適用対象:	すべてのHTML要素
継承:	no
パーセンテージ:	N/A
算出値:	指定通り
正規順序:	文法通り
アニメーション型:	離散
メディア:	視覚

テスト

background-blend-modeリストは、background-image [CSS3BG]と同じ順序で適用しなければなりません。つまり、リストの最初の要素が一番上のレイヤーに適用されます。プロパティにカンマ区切り値が十分ない場合、UAは値のリストを繰り返して必要数にします。

background [CSS3BG]ショートハンドが使われた場合、その要素のbackground-blend-modeプロパティは初期値にリセットされなければなりません。

以下のサンプルマークアップを例とします：

<body>
   <div></div>
</body>

そして次のスタイルルール：

body { background-color: lime; }
div {
  width: 200px;
  height: 200px;
  background-size: 200px 200px;
  background-repeat:no-repeat;
  background-image: linear-gradient(to right, #000000 0%,#ffffff 100%), url('ducky.png');
  background-blend-mode: difference, normal;
}

2つの背景画像のブレンディング

グラデーションはbodyの色とはブレンディングされず、元の色を保持している点に注意してください。

4. Canvas 2Dにおける合成とブレンディングの指定

canvas 2dコンテキストは、現在の合成・ブレンディング演算子を設定するglobalCompositeOperation 属性を定義します。

このプロパティは以下の値を取ります：

‘globalCompositeOperation’

値:	<blend-mode> \| <composite-mode>
初期値:	source-over

<composite-mode>プロパティの構文は以下の通りです：

<composite-mode> = clear | copy | source-over | destination-over | source-in |    
destination-in | source-out | destination-out | source-atop |    
destination-atop | xor | lighter

テスト

canvas-composite-modes.html （ライブテスト）（ソース）

5. 合成の概要

合成とは、グラフィック要素をそのバックドロップと組み合わせることです。

本仕様で記述されるモデルでは、合成操作全体に2つのステップがあります：Porter-Duff合成とブレンディングです。ブレンディングステップでは、グラフィック要素とバックドロップの色がどのように相互作用するかが決定されます。

通常、ブレンディングステップが先に行われ、その後Porter-Duff合成ステップが実行されます。ブレンディングステップでは、要素とバックドロップの混合結果の色が計算されます。グラフィック要素の色はこの結果の色に置き換えられます。その後、グラフィック要素は指定された合成演算子を使ってバックドロップと合成されます。

注: 形状は、その数学的な定義によって決まります。ある点が形状の内部かどうかは明確です。段階的な変化はありません。

注: 不透明度はアルファ値によって記述され、各点の色値とともに保存されます。アルファ値は0から1の範囲です。 0はそのピクセルがカバーされていない、すなわち透明であることを意味します。つまり、ジオメトリがそのピクセルを重ねていないため色の寄与はありません。1はピクセルが完全に不透明であり、ジオメトリが完全に重なっていることを意味します。

5.1. 単純アルファ合成

単純アルファ合成の式は以下の通りです。

co = Cs x αs + Cb x αb x (1 - αs)

各変数の意味：

co: 合成後のプリ乗算済みピクセル値
Cs: 合成されるソースグラフィック要素の色値
αs: 合成されるソースグラフィック要素のアルファ値
Cb: バックドロップの色値
αb: バックドロップのアルファ値

注: すべての値は0以上1以下です。

合成後のピクセル値（co）は、ソースグラフィック要素の寄与 [Cs x αs] とバックドロップの寄与 [Cb x αb x (1 - αs)] を加算して求めます。グラフィック要素・バックドロップそれぞれの色値はアルファ値で乗算され、寄与する色の量が決まります。アルファ値が0ならば色は寄与せず、部分的なアルファは色の一部が寄与することを意味します。バックドロップの寄与は、グラフィック要素の不透明度によりさらに減少します。概念的には、バックドロップの(1 - αs)分がグラフィック要素越しに見えることになり、グラフィック要素が完全不透明（αs=1）の場合は、バックドロップは全く見えません。

上記の単純アルファ合成式は、バックドロップ色とグラフィック要素色の加重平均としての結果色を与え、その重みは両者のアルファ値で決定されます。合成結果のアルファ値は、合成された要素の寄与アルファの単純な和となります。合成結果のアルファ値の式は以下の通りです。

αo = αs + αb x (1 - αs)

各変数の意味：

αo: 合成後のアルファ値
αs: 合成されるグラフィック要素のアルファ値
αb: バックドロップのアルファ値

多くの場合、色と不透明度のプリ乗算済み値を保存する方が効率的です。プリ乗算済み値は次の式で与えられます。

cs = Cs x αs

各変数の意味：

cs: プリ乗算済み値
Cs: 色値
αs: アルファ値

したがって、プリ乗算済み値を用いた単純アルファ合成の式は次のようになります。

co = cs + cb x (1 - αs)

プリ乗算済み値から色成分を抽出するには、次の式で逆算します。

Co = co / αo

5.1.1. 単純アルファ合成の例

これは最も基本的なケースです。1つの図形が単色（α = 1）で塗りつぶされており、空の背景と合成されます。空の背景は合成結果に影響しません。

Cs = RGB(1,0,0)
αs = 1
Cb = RGB(0,0,0)
αb = 0

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(1,0,0) x 1 + RGB(0,0,0) x 0 x (1 - 1)
co = RGB(1,0,0) x 1
co = RGB(1,0,0)

これはより複雑な例です。透明度はありませんが、2つの図形が交差します。

合成式を交差部分に適用すると、次のようになります：

Cs = RGB(0,0,1)
αs = 1
Cb = RGB(1,0,0)
αb = 1

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 1 + RGB(1,0,0) x 1 x (1 - 1)
co = RGB(0,0,1) x 1 + RGB(1,0,0) x 1 x 0
co = RGB(0,0,1) x 1
co = RGB(0,0,1)

合成結果のアルファ値の計算：

αo = αs + αb x (1 - αs)
αo = 1 + 1 x (1 - 1)
αo = 1

合成結果の色成分の計算：

Co = co / αo
Co = RGB(0, 0, 1) / 1
Co = RGB(0, 0, 1)

これは図形が一部透明で、バックドロップが完全に不透明な場合の例です。

合成式を交差部分に適用すると、次のようになります：

Cs = RGB(0,0,1)
αs = 0.5
Cb = RGB(1,0,0)
αb = 1

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 1 x (1 - 0.5)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.5
co = RGB(0.5,0,0.5)

合成結果のアルファ値の計算：

αo = αs + αb x (1 - αs)
αo = 0.5 + 1 x (1 - 0.5)
αo = 1

合成結果の色成分の計算：

Co = co / αo
Co = RGB(0.5, 0, 0.5) / 1
Co = RGB(0.5, 0, 0.5)

図4は、図形とバックドロップの両方が透明な例です。

合成式を交差部分に適用すると、次のようになります：

Cs = RGB(0,0,1)
αs = 0.5
Cb = RGB(1,0,0)
αb = 0.5

co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.5 x (1 - 0.5)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.25
co = RGB(0.25, 0, 0.5)

合成結果のアルファ値の計算：

αo = αs + αb x (1 - αs)
αo = 0.5 + 0.5 x (1 - 0.5)
αo = 0.75

合成結果の色成分の計算：

Co = co / αo
Co = RGB(0.25, 0, 0.5) / 0.75
Co = RGB(0.33, 0, 0.66)

6. 合成とブレンディングの一般式

合成演算子やブレンディング関数を選択できる合成とブレンディングの一般式は、2つのステップで構成されます。これらの関数で使われる用語は、以降のセクションで詳しく説明します。

まずブレンドを適用します

Cs = (1 - αb) x Cs + αb x B(Cb, Cs)

合成

Co = αs x Fa x Cs + αb x Fb x Cb

変数の意味：

Cs: ソース色
Cb: バックドロップ色
αs: ソースアルファ
αb: バックドロップアルファ
B(Cb, Cs): 混合関数
Fa: 使用されるPorter Duff演算子で定義される値
Fb: 使用されるPorter Duff演算子で定義される値

7. バックドロップの計算

バックドロップは、要素の背後にある内容であり、要素が合成される対象です。つまり、バックドロップはそれまでに合成された全ての要素の結果です。

7.1. バックドロップ計算の例

この例ではシンプルな図形が2つあります。青い図形のバックドロップには赤い図形の右下隅が含まれます。点線は青い図形の合成時に調査される領域を示しています。

バックドロップ内の図形にはアルファ値があります。バックドロップ計算時、その図形のアルファ値は維持されます。

8. 合成グループ

合成グループを使うことで、合成とバックドロップの相互作用をより細かく制御できます。グループは、グループ内の合成効果がシーン（すでに存在するバックドロップ）とどう相互作用するかを指定するために使用できます。

合成グループは任意の数の要素で構成でき、他の合成グループを含むこともできます。

合成グループのデフォルトプロパティでは、グループがない場合と視覚的な違いはありません。詳細はグループ不変性を参照してください。

合成グループは、まずグループ内の要素を初期バックドロップに合成します。その結果は色とアルファ情報を持つ単一の要素となります。この要素はグループバックドロップに合成されます。グループバックドロップが最終合成に一度だけ寄与するように注意する必要があります。

初期バックドロップ: 初期バックドロップは、グループの最初の要素を合成する際に使われるバックドロップです。非isolatedグループではグループバックドロップと同じですが、isolatedグループでは完全に透明なバックドロップとなります。
グループバックドロップ: グループバックドロップは、グループ内の最初の要素以外のすべての要素を合成した結果です。

8.1. グループ不変性

単純アルファ合成の重要な性質の1つはグループ不変性です。この振る舞いは本仕様で説明されるより複雑なモデルでも保持されています。デフォルト属性でグループを追加・削除しても、視覚的な違いはありません。

so: A + B + C = A + (B + C) = (A + B) + C

グループにisolateや、normal以外のブレンディングモード、source-over以外のPorter Duff合成演算子などの属性を追加すると、グループは不変ではなくなります。

8.2. isolatedグループ

isolatedグループでは、初期バックドロップは黒色で完全に透明です。

この場合、初期バックドロップはグループバックドロップとは異なります。グループバックドロップとの相互作用は、グループの色・形状・アルファが計算された後に合成される時だけ発生します。

isolatedグループが合成に与える影響の詳細は「isolatedグループとPorter Duffモード」を参照してください。ブレンディングへの影響は「グループアイソレーションによるブレンディングへの影響」を参照してください。

8.3. ルート要素グループ

ルート要素のisolatedグループがルート要素グループです。他の全ての要素・グループはこのグループに合成されます。ルート要素の背景（指定された場合）はルート要素グループに描画され、フィルター、クリップパス、マスク、不透明度などが適用された後にルートグループに合成されます（存在する場合）。

テスト

8.4. ルートグループ

ルートグループはキャンバス全体を包含し、ウェブページのルート要素グループを含みます（またはその下に位置します）。

ブラウザは、最終合成のために無限の白、100%不透明なルートグループを使うことが多いですが、これは必須ではありません。

9. 高度な合成機能

単純アルファ合成はsource-overPorter Duff合成演算子を使用します。

Porter Duff合成は、2つの形状（ソースとデスティネーション）がピクセルの最終色に寄与するモデルに基づいています。ピクセルは4つのサブピクセル領域に分割され、それぞれの領域はソースとデスティネーションの組み合わせを表します。[PORTERDUFF]

4つの領域は次の通りです：

ソースのみ: ソースだけがピクセル色に寄与する領域
デスティネーションのみ: デスティネーションだけがピクセル色に寄与する領域
両方: ソースとデスティネーションの両方がピクセル色を決定する領域
なし: ソースもデスティネーションも最終ピクセル色に寄与しない領域

注: デスティネーションはバックドロップと同義です。このセクションではPorter Duff合成で標準的とされるためデスティネーションと呼びます。また、合成演算子の名称にもdestinationが使われています。

porter duffの影響領域の概要

各領域から最終ピクセル色への寄与は、図形のそのピクセルでのカバレッジと、使用される演算子によって定義されます。カバレッジはアルファ値で指定されます。完全なアルファ（1）は完全なカバレッジを意味し、ゼロのアルファ（0）はカバレッジなしを意味します。つまり、各領域の面積は、ピクセルに寄与する各形状のカバレッジに依存します。各領域の面積は以下の式で計算できます：

両方	αs x αb
ソースのみ	αs x (1 – αb)
デスティネーションのみ	αb x (1 – αs)
なし	(1 – αs) x (1 – αb)

上記の図はソース・デスティネーションの両方のカバレッジが0.5の場合を表します。

Both = 0.5 x 0.5 = 0.25
Source Only = 0.5 (1 – 0.5) = 0.25
Destination Only = 0.5(1 – 0.5) = 0.25
None = (1 – 0.5)(1 – 0.5) = 0.25

したがって、この例で各領域のカバレッジは0.25です。

9.1. Porter Duff合成演算子

LucasfilmのThomas PorterとTom Duffによる画期的な論文では、合成の代数が定義され、12個の「Porter Duff」演算子が開発されました。これらの演算子は、アルファやピクセルカバレッジチャンネル／値を持つグラフィカルオブジェクトの重なりによって形成される4つのサブピクセル領域を混合した結果を制御します。演算子は4領域の全ての現実的な組み合わせを使います。

Porter Duff演算子は12種類あり、ソースとデスティネーションの全ての組み合わせを網羅します。

各演算子の幾何学的表現から、各図形の寄与は出力全体のカバレッジの割合として表現されることが分かります。例えばsource overでは、ソースの寄与は最大（1）、デスティネーションの寄与は残り（1 – αs）です。これはソースとデスティネーションのカバレッジによって修正され、最終ピクセルのカバレッジの式となります：

αo = αs x 1 + αb x (1 – αs)

分数項Fa（この例では1）とFb（この例では1 – αs）は各演算子ごとに定義され、最終ピクセル値に寄与する図形の割合を指定します。カバレッジの一般式は：

αs x Fa + αb x Fb

さらに色を組み込むと、Porter Duffの一般式は次の通りです。

co = αs x Fa x Cs + αb x Fb x Cb

各変数の意味：

co: 出力アルファでプリ乗算された出力色 [0 <= co <= 1]
αs: ソースのカバレッジ（Faは演算子で定義され、ソースの寄与を制御）、Csはソースの色（アルファ乗算前）
αb: デスティネーションのカバレッジ（Fbは演算子で定義され、デスティネーションの寄与を制御）、Cbはデスティネーションの色（アルファ乗算前）

9.1.1. クリア

どの領域も有効ではありません。

Fa = 0; Fb = 0
co = 0
αo = 0

9.1.2. コピー

ソースのみが表示されます。

Fa = 1; Fb = 0
co = αs x Cs
αo = αs

9.1.3. デスティネーション

デスティネーションのみが表示されます。

Fa = 0; Fb = 1
co = αb x Cb
αo = αb

9.1.4. ソースオーバー

ソースがデスティネーションの上に配置されます。

Fa = 1; Fb = 1 – αs
co = αs x Cs + αb x Cb x (1 – αs)
αo = αs + αb x (1 – αs)

9.1.5. デスティネーションオーバー

デスティネーションがソースの上に配置されます。

Fa = 1 – αb; Fb = 1
co = αs x Cs x (1 – αb) + αb x Cb
αo = αs x (1 – αb) + αb

9.1.6. ソースイン

デスティネーションと重なるソースがデスティネーションを置き換えます。

Fa = αb; Fb = 0
co = αs x Cs x αb
αo = αs x αb

9.1.7. デスティネーションイン

ソースと重なるデスティネーションがソースを置き換えます。

Fa = 0; Fb = αs
co = αb x Cb x αs
αo = αb x αs

9.1.8. ソースアウト

ソースはデスティネーションの外側に配置されます。

Fa = 1 – αb; Fb = 0
co = αs x Cs x (1 – αb)
αo = αs x (1 – αb)

9.1.9. デスティネーションアウト

デスティネーションはソースの外側に配置されます。

Fa = 0; Fb = 1 – αs
co = αb x Cb x (1 – αs)
αo = αb x (1 – αs)

9.1.10. ソースアトップ

デスティネーションと重なるソースがデスティネーションを置き換え、デスティネーションは他の場所に描画されます。

Fa = αb; Fb = 1 – αs
co = αs x Cs x αb + αb x Cb x (1 – αs)
αo = αs x αb + αb x (1 – αs)

9.1.11. デスティネーションアトップ

ソースと重なるデスティネーションがソースを置き換え、ソースは他の場所に描画されます。

Fa = 1 - αb; Fb = αs
co = αs x Cs x (1 - αb) + αb x Cb x αs
αo = αs x (1 - αb) + αb x αs

9.1.12. XOR

ソースとデスティネーションの重ならない領域が合成されます。

Fa = 1 - αb; Fb = 1 – αs
co = αs x Cs x (1 - αb) + αb x Cb x (1 – αs)
αo = αs x (1 - αb) + αb x (1 – αs)

9.1.13. ライター

ソース画像とデスティネーション画像の合計を表示します。Porter Duff論文ではplus演算子として定義されています。[PORTERDUFF]

Fa = 1; Fb = 1
co = αs x Cs + αb x Cb;
αo = αs + αb

9.2. Porter Duffモードによるグループ合成動作

isolatedグループ内の要素を合成する場合、要素は透明な黒の初期バックドロップ上に合成されます。グループの最下層要素が、バックドロップ依存のPorter Duff合成演算子（デスティネーション、ソースイン、デスティネーションイン、デスティネーションアウト、ソースアトップなど）を使う場合、合成結果は空になります。グループ内の以降の要素は、最初の合成結果と合成されます。

10. ブレンディング

ブレンディングは、ソース要素とバックドロップが重なる部分の色混合を計算する合成の側面です。
概念的には、ソース要素の色がその場でバックドロップとブレンドされます。ブレンディング後、修正されたソース要素がバックドロップと合成されます。実際には、これらは通常ひとつのステップで行われます。
ブレンディングの計算ではプリ乗算済みの色値を使用してはなりません。

「混合」式は次のように定義されます：

Cm = B(Cb, Cs)

意味：

Cm: ブレンディング後の結果色
B: ブレンディングを行う式
Cb: バックドロップの色
Cs: ソース色

混合式の結果は、色範囲の最小値・最大値にクランプしなければなりません。

混合関数の結果はバックドロップのアルファで調整されます。完全に不透明なバックドロップでは混合関数が完全に適用されます。バックドロップが透明な場合は、最終結果はソース色と混合色の加重平均となり、重みはバックドロップのアルファ値によって制御されます。新しい色の値は次のようになります：

Cr = (1 - αb) x Cs + αb x B(Cb, Cs)

意味：

Cr: 結果色
B: ブレンディングを行う式
Cs: ソース色
Cb: バックドロップの色
αb: バックドロップのアルファ

この例では、ブレンディングモードを持つ赤い矩形が、異なる不透明度を持つ緑色の矩形群の上に配置されています。

上の矩形が、バックドロップの不透明度が低くなるほど赤に近づくことに注目してください。

注：次の式は、ソースとバックドロップが交差する領域の色値を与え、その後指定されたPorter Duff合成式で合成されます。単純アルファブレンディングの場合、式は次のようになります：

単純アルファ合成:
    co = cs + cb x (1 - αs)
非プリ乗算で表記:
    αo x Co = αs x Cs + (1 - αs) x αb x Cb
ここでCsにブレンディング結果を代入すると:
    αo x Co = αs x ((1 - αb) x Cs + αb x B(Cb, Cs)) + (1 - αs) x αb x Cb
            = αs x (1 - αb) x Cs + αs x αb x B(Cb, Cs) + (1 - αs) x αb x Cb

10.1. 分離型ブレンドモード

ブレンドモードが分離型と呼ばれるのは、結果色の各成分が、構成するバックドロップおよびソース色の対応する成分によって完全に決定される場合です。つまり、混合式が各成分セットに個別に適用されます。

以下の各ブレンドモードは、色成分ごとに混合関数B(Cb, Cs)を適用します。簡単のため、この章の例はすべてソースオーバー合成を使用します。

10.1.1. normalブレンドモード

これはデフォルトの属性で、ブレンディングなしを指定します。混合式は単にソース色を選択します。

B(Cb, Cs) = Cs

10.1.2. multiplyブレンドモード

ソース色がデスティネーション色と乗算され、デスティネーションを置き換えます。

結果色は、ソースまたはデスティネーション色のいずれよりも必ず暗くなります。任意の色と黒を乗算すると黒になります。任意の色と白を乗算すると元の色が維持されます。

B(Cb, Cs) = Cb x Cs

10.1.3. screenブレンドモード

バックドロップおよびソース色値の補数を乗算し、結果の補数を取ります。

結果色は、2つの成分色のいずれよりも必ず明るくなります。白でスクリーンすると白になり、黒でスクリーンすると元の色が維持されます。この効果は複数の写真スライドを同時に1つのスクリーンに投影するのと似ています。

B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]
          = Cb + Cs -(Cb x Cs)

10.1.4. overlayブレンドモード

バックドロップ色値によって乗算またはスクリーンされます。

ソース色はバックドロップにオーバーレイされ、ハイライトとシャドウを維持します。バックドロップ色は置き換えられるのではなく、ソース色と混合され、バックドロップの明るさや暗さを反映します。

B(Cb, Cs) = HardLight(Cs, Cb)

オーバレイはhard-lightブレンドモードの逆です。hard-lightの定義を参照してください。

10.1.5. darkenブレンドモード

バックドロップとソース色のうち暗い方を選択します。

バックドロップはソースが暗い場合に置き換えられ、そうでない場合は変更されません。

B(Cb, Cs) = min(Cb, Cs)

10.1.6. lightenブレンドモード

バックドロップとソース色のうち明るい方を選択します。

バックドロップはソースが明るい場合に置き換えられ、そうでない場合は変更されません。

B(Cb, Cs) = max(Cb, Cs)

結果が範囲を超えた場合は切り捨てなければなりません。

10.1.7. color-dodgeブレンドモード

バックドロップ色を明るくし、ソース色を反映します。黒で塗ると変化はありません。

if(Cb == 0)
    B(Cb, Cs) = 0
else if(Cs == 1)
    B(Cb, Cs) = 1
else
    B(Cb, Cs) = min(1, Cb / (1 - Cs))

10.1.8. color-burnブレンドモード

バックドロップ色を暗くし、ソース色を反映します。白で塗ると変化はありません。

if(Cb == 1)
    B(Cb, Cs) = 1
else if(Cs == 0)
    B(Cb, Cs) = 0
else
    B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)

10.1.9. hard-lightブレンドモード

ソース色値によって乗算またはスクリーンされます。効果はバックドロップに強いスポットライトを当てたようなものです。

if(Cs <= 0.5)
    B(Cb, Cs) = Multiply(Cb, 2 x Cs)
else
    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)

multiplyおよびscreenの式を参照してください。

10.1.10. soft-lightブレンドモード

ソース色値によって暗くまたは明るくします。効果はバックドロップに拡散したスポットライトを当てたようなものです。

    if(Cs <= 0.5)
        B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)
    else
        B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)
with
    if(Cb <= 0.25)
        D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb
    else
        D(Cb) = sqrt(Cb)

10.1.11. differenceブレンドモード

2つの成分色のうち暗い方を明るい色から減算します。

白で塗るとバックドロップ色が反転し、黒で塗ると変化しません。

B(Cb, Cs) = | Cb - Cs |

10.1.12. exclusionブレンドモード

Differenceモードに似た効果ですが、コントラストは低めです。白で塗るとバックドロップ色が反転し、黒で塗ると変化しません。

B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs

10.2. 非分離型ブレンドモード

非分離型ブレンドモードは、各成分を個別に見る分離型と異なり、すべての色成分を組み合わせて考慮します。これらのブレンドモードは概念的に以下の手順を踏みます：

バックドロップとソース色をブレンディング色空間から中間の色相・彩度・輝度表現へ変換する。
バックドロップとソース色の色相・彩度・輝度成分を組み合わせて新しい色を作成する。
結果を元の色空間に変換する。

非分離型ブレンドモードの数式では、いくつかの補助関数を使用します：

    Lum(C) = 0.3 × Cred + 0.59 × Cgreen + 0.11 × Cblue

    ClipColor(C)
        L = Lum(C)
        n = min(Cred, Cgreen, Cblue)
        x = max(Cred, Cgreen, Cblue)
        if(n < 0)
            C = L + (((C - L) × L) / (L - n))

        if(x > 1)
            C = L + (((C - L) × (1 - L)) / (x - L))

        return C

    SetLum(C, l)
        d = l - Lum(C)
        Cred = Cred + d
        Cgreen = Cgreen + d
        Cblue = Cblue + d
        return ClipColor(C)

    Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)

次の関数内のmin, mid, maxの添え字は、関数に入ったときの色成分の最小・中間・最大値を指します。

    SetSat(C, s)
        if(Cmax > Cmin)
            Cmid = (((Cmid - Cmin) × s) / (Cmax - Cmin))
            Cmax = s
        else
            Cmid = Cmax = 0
        Cmin = 0
        return C;

10.2.1. hueブレンドモード

ソース色の色相とバックドロップ色の彩度・輝度で新しい色を作成します。

B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))

10.2.2. saturationブレンドモード

ソース色の彩度とバックドロップ色の色相・輝度で新しい色を作成します。このモードでバックドロップが純粋なグレー（彩度なし）の領域を塗ると変化はありません。

B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))

10.2.3. colorブレンドモード

ソース色の色相・彩度とバックドロップ色の輝度で新しい色を作成します。これによりバックドロップのグレー階調が保持され、モノクロ画像の着色やカラー画像の色合い付けに便利です。

B(Cb, Cs) = SetLum(Cs, Lum(Cb))

10.2.4. luminosityブレンドモード

ソース色の輝度とバックドロップ色の色相・彩度で新しい色を作成します。これはColorモードの逆の効果となります。

B(Cb, Cs) = SetLum(Cb, Lum(Cs))

10.3. グループアイソレーションによるブレンディングへの影響

注: 次の例では、紙飛行機を構成する要素がグループ内にあり、それぞれの要素にmultiplyブレンドモードが設定されています。

左側の飛行機は通常のグループ、右側はisolatedグループです。

isolatedグループでは、グループ内の要素は空の初期バックドロップ上に合成されるため、グループ内の要素はバックドロップとmultiplyしません。通常グループでは、グループ内の要素は土地や空を含む初期バックドロップ上に合成されるため、飛行機の各要素が土地や空とmultiplyします。どちらの場合も、グループ合成の結果は通常のmix-blend-mode（グループに適用されるデフォルトのmix-blend-mode）で土地や空と合成されます。

プライバシーに関する考慮事項

本仕様には新たなプライバシーに関する考慮事項は報告されていません。

セキュリティに関する考慮事項

ブレンディングと合成処理のタイミングは、ソース・デスティネーションピクセルに依存しないことが重要です。処理はピクセル値に関わらず常に同じ時間で実行されるように実装しなければなりません。

このルールが守られない場合、攻撃者が情報を推測してタイミング攻撃を仕掛ける可能性があります。

タイミング攻撃とは、処理時間の違いを分析することで、本来保護されている内容の情報を取得する手法です。例えば赤いピクセルの描画に緑のピクセルよりも時間がかかる場合、描画される要素の粗い画像を、実際の内容にアクセスすることなく復元できてしまいます。

変更履歴

この仕様は、2015年1月13日勧告候補から以下の変更が加えられました：

プライバシー・セキュリティセクション追加
Animatable: no を Animation type: discrete に変更
HTMLおよびSVGのルート要素とルート要素グループを定義
ルートグループが必ずしも不透明な白である必要がない旨を明記
ルートグループとisolatingグループの定義を改善
乗算記号×を一貫して使用し、xや*を使わないよう修正
greenではなく、limeが必要な箇所の例を修正
background-blend-modeの初期値を修正
様々なマークアップ・リンク修正

この仕様は、2014年2月20日勧告候補から以下の変更が加えられました：

<img>として埋め込まれたSVG画像の強制isolatingは「リスクあり」から除去
<composite-mode>のオプションからdestinationを削除

この仕様は、2014年1月7日 Last Call Working draftから以下の変更が加えられました：

不要な規範的・参考文献を削除

この仕様は、2013年10月10日 Last Call Working draftから以下の変更が加えられました：

knockoutを非規範セクションから削除
単純アルファ合成からSVGに関する段落を削除
abstractをCSS対応・意図明確化のため修正
clip-to-selfおよびその参照を削除
セクション5-10を規範的にし、注記・例を明確化

この仕様は、2013年6月25日 Working Draftから以下の変更が加えられました：

SVGでisolatedグループを作成する演算子からclippingを除去
background-blend-modeを他のbackground構文の繰り返し動作と一致するよう変更
mix-compositeプロパティを削除
すべてのオープンなissueを解決

テスト

opacity-and-transform-animation-crash.html （ライブテスト）（ソース）

適合性

文書の慣例

適合要件は記述的な断定とRFC 2119用語の組み合わせで表現されます。規範部分における「MUST」「MUST NOT」「REQUIRED」「SHALL」「SHALL NOT」「SHOULD」「SHOULD NOT」「RECOMMENDED」「MAY」「OPTIONAL」という語は、RFC 2119に記載されている通りに解釈されます。ただし、可読性のため、これらの語は本仕様書ではすべて大文字では記載されません。

本仕様書のテキストは、明示的に非規範と示されているセクション、例、および注記を除き、すべて規範的です。[RFC2119]

本仕様書の例は、「for example」という語で始まるか、class="example"を指定して規範テキストから区別されています。次のような形です：

参考注記は「Note」で始まり、class="note"を指定して規範テキストから区別されています。次のような形です：

助言事項は、特別な注意を喚起するようにスタイルされた規範セクションであり、<strong class="advisement">を用いて他の規範テキストから区別されます。例： UAはアクセシブルな代替手段を必ず提供しなければなりません。

適合クラス

本仕様への適合は、次の3つの適合クラスに定義されています：

スタイルシートが本仕様に適合しているとは、このモジュールで定義された構文を使用するすべての文が、汎用CSS文法および各機能の個別文法に従って有効である場合を指します。

レンダラーが本仕様に適合しているとは、スタイルシートを適切な仕様で定義された通りに解釈することに加え、本仕様で定義されたすべての機能を正しくパースし、文書を正しくレンダリングすることです。ただし、デバイスの制限によってUA（ユーザーエージェント）が文書を正しくレンダリングできない場合でも、UAが非適合となるわけではありません。（例：モノクロモニターでは色のレンダリングは要求されません）

オーサリングツールが本仕様に適合しているとは、汎用CSS文法および本モジュールの各機能の個別文法に従って構文的に正しいスタイルシートを書き出し、本モジュールで記述されているスタイルシートのその他の適合要件も満たしている場合です。

部分的な実装

著者が前方互換パース規則を利用してフォールバック値を設定できるように、CSSレンダラーは必ず使えるレベルのサポートがない@規則、プロパティ、プロパティ値、キーワード、その他の構文要素を無効（適切に無視）として扱わなければなりません。特に、ユーザーエージェントは絶対に未対応の値を選択的に無視して、複数値プロパティ宣言のうち対応している値だけを適用してはなりません。値のうちいずれかが無効（未対応値は必ず無効）となる場合、CSSは宣言全体を無視する必要があります。

不安定および独自機能の実装

非実験的な実装

仕様がCandidate Recommendationに到達した時点で、非実験的な実装が可能となり、実装者は正しく仕様通りに実装できるCRレベルの機能についてはプレフィックスなしで公開すべきです。

CSSの相互運用性を確立・維持するため、CSSワーキンググループは、非実験的なCSSレンダラーがW3Cに実装報告書（必要に応じてその報告に使ったテストケースも）を提出した上で、CSS機能のプレフィックス無し実装を公開することを求めています。W3Cに提出されたテストケースは、CSSワーキンググループによるレビューおよび修正の対象となります。

CR終了基準

この仕様を勧告案へ進めるためには、各機能について少なくとも2つの独立した相互運用可能な実装が必要です。各機能は異なる製品セットで実装されても構いません。すべての機能を単一製品で実装する必要はありません。この基準のために、以下の用語を定義します：

仕様は少なくとも6ヶ月間Candidate Recommendationのまま維持されます。

合成とブレンディング レベル1

概要

この文書の位置付け

1. 導入

2. この文書の読み方

2.1. モジュール間の相互作用

2.2. 値

3. CSSにおけるブレンディングの指定

3.1. グラフィカル操作の順序

3.2. HTMLに特有の動作

3.3. SVGに特有の動作

3.4. CSSプロパティ

3.4.1. mix-blend-modeプロパティ

3.4.2. isolationプロパティ

3.4.3. background-blend-modeプロパティ

4. Canvas 2Dにおける合成とブレンディングの指定

5. 合成の概要

5.1. 単純アルファ合成

5.1.1. 単純アルファ合成の例

6. 合成とブレンディングの一般式

7. バックドロップの計算

7.1. バックドロップ計算の例

8. 合成グループ

8.1. グループ不変性

8.2. isolatedグループ

8.3. ルート要素グループ

8.4. ルートグループ

9. 高度な合成機能

9.1. Porter Duff合成演算子

9.1.1. クリア

9.1.2. コピー

9.1.3. デスティネーション

9.1.4. ソースオーバー

9.1.5. デスティネーションオーバー

9.1.6. ソースイン

9.1.7. デスティネーションイン

9.1.8. ソースアウト

9.1.9. デスティネーションアウト

9.1.10. ソースアトップ

9.1.11. デスティネーションアトップ

9.1.12. XOR

9.1.13. ライター

9.2. Porter Duffモードによるグループ合成動作

10. ブレンディング

10.1. 分離型ブレンドモード

10.1.1. normalブレンドモード

10.1.2. multiplyブレンドモード

10.1.3. screenブレンドモード

10.1.4. overlayブレンドモード

10.1.5. darkenブレンドモード

10.1.6. lightenブレンドモード

10.1.7. color-dodgeブレンドモード

10.1.8. color-burnブレンドモード

10.1.9. hard-lightブレンドモード

10.1.10. soft-lightブレンドモード

10.1.11. differenceブレンドモード

10.1.12. exclusionブレンドモード

10.2. 非分離型ブレンドモード

10.2.1. hueブレンドモード

10.2.2. saturationブレンドモード

10.2.3. colorブレンドモード

10.2.4. luminosityブレンドモード

10.3. グループアイソレーションによるブレンディングへの影響

プライバシーに関する考慮事項

セキュリティに関する考慮事項

変更履歴

適合性

文書の慣例

適合クラス

部分的な実装

不安定および独自機能の実装

非実験的な実装

CR終了基準

索引

本仕様で定義された用語

参照によって定義されている用語

参考文献

規範的参考文献

参考的文献

プロパティ索引

合成とブレンディングレベル1