-CSS:カスケーディングスタイルシート|MDN

normal

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

multiply

最終的な色は、上と下の色を乗算した結果です。
黒の層は黒の最終層につながり、白の層は変化しません。
透明フィルムに印刷された二つの画像が重なっているような効果です。

screen

最終的な色は、色を反転し、それらを乗算し、その値を反転した結果です。
黒い層は変化なし、白い層は白い最終層につながります。
投影スクリーンに二つの画像が輝いているような効果です。

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

最後の色は、明るい色から暗い色を差し引いた結果です。
黒のレイヤーは効果がありませんが、白のレイヤーは他のレイヤーの色を反転させます。

exclusion

最終的な色はdifferenceに似ていますが、コントラストは低くなります。
differenceと同様に、黒のレイヤーは効果がありませんが、白のレイヤーは他のレイヤーの色を反転させます。

hue

最終的な色は上の色の色相を持ち、下の色の彩度と明るさを使用します。

saturation

最終的な色は上の色の彩度を持ち、下の色の色相と光度を使用します。
彩度のない純粋な灰色の背景は効果がありません。

color

最終的な色は上の色の色相と彩度を持ち、下の色の光度を使用します。
この効果はグレーレベルを維持し、前景を色付けするために使用できます。

luminosity

最終的な色は上の色の明るさを持ち、下の色の色相と彩度を使用します。
このブレンドモードはcolorと同じですが、レイヤーがスワップされます。

コメントを残す

メールアドレスが公開されることはありません。