ブレンドモードは２つの画像や画像と塗りをブレンドして表現するものです。
Photoshopなどで頻繁に活用される手法ですが、CSSでも使用することができます。
background-blend-modeプロパティ
注）IEもEdgeともにこのプロパティは使用できません。Can I use
background-blend-modeプロパティはCSS3から使用可能となった背景画像を複数指定できる仕組みを活用して行います。２つの背景画像をbackgroundプロパティで指定してブレンド効果をつける方法と背景画像と背景色をブレンドする方法があります。
ただし、親子関係の要素をブレンドするものではありません。
主な値にはscreen,multiply,overlayなどがあります。
screenは白い部分は白のままで黒い部分は背景が透けます。
multiplyは黒い部分は黒のままで白い部分は背景が透けます。
overlayハイライトとシャドウ情報は保持されてコントラストが増加します。
背景画像と背景色をブレンド
2つの背景画像をブレンド
mix-blend-modeプロパティ
注）IEもEdgeともにこのプロパティは使用できません。Can I use
背景画像とimg画像でmix-blend-modeを適用します。
ブレンドの種類は他にもあります。
詳細はCompositing and Blending Level 1を参考にしてください。
Separable blend modes
- normal blend mode
- multiply blend mode
- screen blend mode
- overlay blend mode
- darken blend mode
- lighten blend mode
- color-dodge blend mode
- color-burn blend mode
- hard-light blend mode
- soft-light blend mode
- difference blend mode
- exclusion blend mode
Non-separable blend modes
- hue blend mode
- saturation blend mode
- color blend mode
- luminosity blend mode
