We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

CSS<blend-mode> データ型は、要素が重なったときにどのように色が現れるかを記述します。 background-blend-mode または mix-blend-mode プロパティで使用されます。

ブレンドモードは、適用されるレイヤーの各ピクセルについて前景と背景の色を取り、それらを計算し、新しい色の値を返します。

構文

<blend-mode> データ型は、以下に挙げたキーワードのうちの一つで定義します。

normal

下の色が何であるかに関わらず、上の色が最終的な色になります。
この効果は2枚の不透明の紙が重なっているようなものです。

multiply

上の色と下の色を掛け合わせた結果が最終的な色になります。
黒いレイヤーは最終的に黒いレイヤーに近づけ、白いレイヤーは変化をもたらしません。
この効果は2枚の透明なフィルムに印刷された画像を重ね合わせたようなものです。

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> の定義
勧告候補 初回定義。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応35 ?30 なし22 ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応5959 ?54 ? ?7.0

関連情報

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

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