ブレンドモード

デュオトーンは、ハイライトとシャドウの 2 色のみで構成されているように見えるように画像を加工する、写真でよく使用されるカラー処理です。CSS でこれを実現するにはどうすればよいですか?

ブレンドモードと、フィルタ疑似要素など、これまで学習した他の手法を使用して、この効果を任意の画像に適用できます。

ブレンドモードとは

ブレンドモードは、Photoshop などのデザインツールでよく使用され、2 つ以上のレイヤの色を混ぜて合成効果を作成します。色の混合方法を変更することで、非常に興味深い視覚効果を実現できます。背景が白の画像を切り抜いて背景を透明に見せるなど、ユーティリティとしてブレンドモードを使用することもできます。

デザインツールで使用できるほとんどのブレンドモードは、mix-blend-mode プロパティまたは background-blend-mode プロパティを使用して CSS で使用できます。mix-blend-mode は要素全体にブレンドを適用し、background-blend-mode は要素の背景にブレンドを適用します。

background-blend-mode は、要素に複数の背景があり、それらをすべて相互にブレンドする場合に使用します。

mix-blend-mode は、疑似要素を含む要素全体に影響します。たとえば、最初の例の duotone 画像では、疑似要素を使用して要素にカラーレイヤを適用しています。

ブレンドモードは、可分と不可分の 2 つのカテゴリに分類されます。分離可能なブレンドモードでは、RGB などの各色成分が個別に考慮されます。非分離ブレンドモードでは、すべての色成分が同等に考慮されます。

ブラウザの互換性

mix-blend-mode

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

Source

background-blend-mode

Browser Support

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

Source

分離可能なブレンドモード

標準

これはデフォルトのブレンド モードであり、要素同士のブレンド方法は変更されません。

乗算

multiply のブレンドモードは、複数の透明シートを重ね合わせるようなものです。白色のピクセルは透明に、黒色のピクセルは黒く表示されます。中間の値は、明るさ(光)値に掛けられます。つまり、明るい部分は非常に明るくなり、暗い部分は非常に暗くなります。ほとんどの場合、結果は暗くなります。

.my-element {
  mix-blend-mode: multiply;
}

画面

screen を使用すると、値が乗算されます。これは multiply とは逆の効果で、ほとんどの場合、明るい結果になります。

.my-element {
  mix-blend-mode: screen;
}

オーバーレイ

このブレンド モード(overlay)は、multiplyscreen を組み合わせたものです。ベースの暗い色はより暗くなり、ベースの明るい色はより明るくなります。50% グレーなどの中間色は影響を受けません。

.my-element {
  mix-blend-mode: overlay;
}

比較(暗)

darken ブレンド モードは、ソース画像と背景画像の暗い色の明るさを比較し、2 つのうち最も暗い色を選択します。これは、各色チャネルについて、明るさではなく RGB 値を比較することで行われます(multiplyscreen が行うように)。darkenlighten では、この比較プロセスから新しいカラー値が作成されることがよくあります。

.my-element {
  mix-blend-mode: darken;
}

比較(明)

lighten を使用すると、darken とは正反対の動作になります。

.my-element {
  mix-blend-mode: lighten;
}

カラー(覆い焼き)

color-dodge を使用すると、背景色が明るくなり、ソースの色が反映されます。純粋な黒色にはこのモードの効果はありません。

.my-element {
  mix-blend-mode: color-dodge;
}

カラー(焼き込み)

color-burn ブレンドモードは multiply ブレンドモードと非常によく似ていますが、コントラストが強くなり、中間色がより彩度が高くなり、ハイライトが減ります。

.my-element {
  mix-blend-mode: color-burn;
}

ハードライト

hard-light を使用すると、鮮明なコントラストが作成されます。このブレンドモードでは、明るさの値をスクリーンまたは乗算します。ピクセル値が 50% グレーより明るい場合、画像はスクリーン処理されたように明るくなります。暗い場合は乗算されます。

.my-element {
  mix-blend-mode: hard-light;
}

ソフトライト

soft-light ブレンドモードは、overlay のよりマイルドなバージョンです。コントラストが低い以外は、ほぼ同じ方法で動作します。

.my-element {
  mix-blend-mode: soft-light;
}

差異

difference の仕組みを理解するには、写真のネガフィルムの仕組みを理解するとわかりやすいでしょう。difference ブレンドモードは、各ピクセルの差分値を取り、明るい色を反転します。色の値が同じ場合は黒になります。値の差は反転します。

.my-element {
  mix-blend-mode: difference;
}

除外対象

exclusion の使用は difference と非常によく似ていますが、同じピクセルに黒を返す代わりに、50% グレーを返します。これにより、コントラストの低い柔らかい出力が得られます。

.my-element {
  mix-blend-mode: exclusion;
}

分離不可能なブレンド モード

これらのブレンドモードは、HSL コンポーネントと考えることができます。各フィルタは、アクティブ レイヤから特定のコンポーネント値を取り出し、他のコンポーネント値と混ぜ合わせます。

色調

hue ブレンド モードは、ソースカラーの色相を取得し、背景色の彩度と輝度に適用します。

.my-element {
  mix-blend-mode: hue;
}

彩度

これは hue と同じように機能しますが、ブレンド モードとして saturation を使用すると、ソースカラーの彩度が背景色の色相と明るさに適用されます。

.my-element {
  mix-blend-mode: saturation;
}

color ブレンド モードでは、ソースカラーの色相と彩度、および背景色の輝度から色が作成されます。

.my-element {
  mix-blend-mode: color;
}

光度

最後に、luminositycolor の逆数です。ソースカラーの輝度と背景色の色相と彩度を持つ色を作成します。

.my-element {
  mix-blend-mode: luminosity;
}

isolation プロパティ

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

Source

isolation プロパティの値を isolate に設定すると、新しいスタッキング コンテキストが作成され、背景レイヤとブレンドされなくなります。z-index モジュールで学んだように、新しいスタッキング コンテキストを作成すると、そのレイヤがベースレイヤになります。つまり、親レベルのブレンド モードは適用されなくなりますが、isolation: isolate が設定された要素内の要素は引き続きブレンドできます。

background プロパティはすでに分離されているため、background-blend-mode では機能しません。

理解度を確認する

ブレンドモードに関する知識をテストする

次のうち、CSS のブレンドモードはどれですか。

Dullen
比較(明)
乗算
差異
明るくする
オーバーレイ

異なる色を異なる方法でブレンドする場合、どのスタイルのブレンドモードが必要ですか。

分離
分離不可