mix-blend-modeの評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)
目次
1.mix-blend-modeとは?
mix-blend-modeプロパティは要素同士をどのように混合するかを指定します。
値の指定方法は以下の通りです。
{ mix-blend-mode: 値; }
値の指定方法
- normal
- multiply
- screen
- overlay
- darken
- lighten
- color-dodge
- color-burn
- hard-light
- soft-light
- difference
- exclusion
- hue
- saturation
- color
- luminosity
2.mix-blend-modeの使い方
それではmix-blend-modeの使い方をみていきましょう。
.background {
mix-blend-mode: overlay;
}
上記のようにすることで下レイヤー色に応じて、乗算またはスクリーンで合成します。
下レイヤー色が暗い色なら乗算でより暗く合成され、下レイヤー色が明るい色ならスクリーンでより明るく合成されます。
他にも値を設定できるのでいろいろと試してみることをお勧めします!