background-blend-modeの評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)
目次
1.background-blend-modeとは?
background-blend-modeプロパティはある要素の背景色同士、背景画像同士、背景色と背景画像をどのように混合するかを指定します。
値の指定方法は以下の通りです。
{ background-blend-mode: 値; }
値の指定方法
- normal
- multiply
- screen
- overlay
- darken
- lighten
- color-dodge
- color-burn
- hard-light
- soft-light
- difference
- exclusion
- hue
- saturation
- color
- luminosity
2.background-blend-modeの使い方
それではbackground-blend-modeの使い方をみていきましょう。
.background {
background-blend-mode: darken;
}
上記のようにすることで下レイヤー色と上レイヤー色のそれぞれのRGB値を比較して、よりRGB値の低い(暗い)色を採用して表示します。
他にも値を設定できるのでいろいろと試してみることをお勧めします!