[CSS] background-blend-modeで背景色と背景画像の混合方法を指定しよう!

1.background-blend-modeとは?

background-blend-modeプロパティはある要素の背景色同士、背景画像同士、背景色と背景画像をどのように混合するかを指定します。

値の指定方法は以下の通りです。

{ background-blend-mode: 値; }

値の指定方法

2.background-blend-modeの使い方

それではbackground-blend-modeの使い方をみていきましょう。

.background { 
 background-blend-mode: darken;
}

上記のようにすることで下レイヤー色と上レイヤー色のそれぞれのRGB値を比較して、よりRGB値の低い（暗い）色を採用して表示します。

他にも値を設定できるのでいろいろと試してみることをお勧めします!