Blend mode sample

背景画像の上に画像を重ねる

通常

ブレンドモードを利用せず、海辺の画像の上に、透過PINGのロゴ画像をシンプルに重ねています。

乗算

色と色が重なる部分を暗くする描画モードです。重ねれば重ねるほど暗くなります。

{mix-blend-mode: multiply;}

スクリーン

色と色が重なる部分を明るくする描画モードです。重ねれば重ねるほど明るくなります。

{mix-blend-mode: screen;}

焼き込み

色味(色相)を保ちながら、色と色が重なる部分を暗くし、コントラストを強くする描画モードです。

{mix-blend-mode: color-burn;}

覆い焼き

色味(色相)を保ちながら、色と色が重なる部分を明るくし、コントラストを強くする描画モードです。

{mix-blend-mode: color-dodge;}

オーバーレイ

下のレイヤーの色が暗いと「乗算」、明るいと「スクリーン」が適用される描画モードです。

{mix-blend-mode: overlay;}

ソフトライト

オーバーレイよりもコントラストが弱い描画モードです。

{mix-blend-mode: soft-light;}

ハードライト

オーバーレイよりもコントラストが強い描画モードです。

{mix-blend-mode: hard-light;}

比較（暗）

重なる部分の両方の色をくらべて、暗い方が適用される描画モードです。

{mix-blend-mode: darken;}

比較（明）

重なる部分の両方の色をくらべて、明るい方が適用される描画モードです。

{mix-blend-mode: lighten;}

差の絶対値

明度の大きい方から小さい方の数値が引かれて合成される描画モードです。白を重ねた場合は単純に色が反転し、黒を重ねた場合は何の影響もありません。

{mix-blend-mode: difference;}

除外

差の絶対値よりもコントラストが弱い描画モードです。

{mix-blend-mode: exclusion;}

色相

下のレイヤーの輝度と彩度を維持したまま、上のレイヤーの色相を合成する描画モードです。

{mix-blend-mode: hue;}

彩度

下のレイヤーの輝度と色相を維持したまま、上のレイヤーの彩度を合成する描画モードです。

{mix-blend-mode: saturation;}

カラー

下のレイヤーの輝度を維持したまま、上のレイヤーの色相と彩度を合成する描画モードです。

{mix-blend-mode: color;}

輝度

上のレイヤーの色の輝度が、下のレイヤーに合成される描画モードです。

{mix-blend-mode: luminosity;}

背景画像の上にテキストを重ねる

通常

ブレンドモードを利用せず、海辺の画像の上に、テキストをシンプルに重ねています。

乗算

色と色が重なる部分を暗くする描画モードです。重ねれば重ねるほど暗くなります。

{mix-blend-mode: multiply;}

スクリーン

色と色が重なる部分を明るくする描画モードです。重ねれば重ねるほど明るくなります。

{mix-blend-mode: screen;}

焼き込み

色味(色相)を保ちながら、色と色が重なる部分を暗くし、コントラストを強くする描画モードです。

{mix-blend-mode: color-burn;}

覆い焼き

色味(色相)を保ちながら、色と色が重なる部分を明るくし、コントラストを強くする描画モードです。

{mix-blend-mode: color-dodge;}

オーバーレイ

下のレイヤーの色が暗いと「乗算」、明るいと「スクリーン」が適用される描画モードです。

{mix-blend-mode: overlay;}

ソフトライト

オーバーレイよりもコントラストが弱い描画モードです。

{mix-blend-mode: soft-light;}

ハードライト

オーバーレイよりもコントラストが強い描画モードです。

{mix-blend-mode: hard-light;}

比較（暗）

重なる部分の両方の色をくらべて、暗い方が適用される描画モードです。

{mix-blend-mode: darken;}

比較（明）

重なる部分の両方の色をくらべて、明るい方が適用される描画モードです。

{mix-blend-mode: lighten;}

差の絶対値

明度の大きい方から小さい方の数値が引かれて合成される描画モードです。白を重ねた場合は単純に色が反転し、黒を重ねた場合は何の影響もありません。

{mix-blend-mode: difference;}

除外

差の絶対値よりもコントラストが弱い描画モードです。

{mix-blend-mode: exclusion;}

色相

下のレイヤーの輝度と彩度を維持したまま、上のレイヤーの色相を合成する描画モードです。

{mix-blend-mode: hue;}

彩度

下のレイヤーの輝度と色相を維持したまま、上のレイヤーの彩度を合成する描画モードです。

{mix-blend-mode: saturation;}

カラー

下のレイヤーの輝度を維持したまま、上のレイヤーの色相と彩度を合成する描画モードです。

{mix-blend-mode: color;}

輝度

上のレイヤーの色の輝度が、下のレイヤーに合成される描画モードです。

{mix-blend-mode: luminosity;}