[CSS] mix-blend-modeで要素同士の混合方法を指定しよう!

1.mix-blend-modeとは?

mix-blend-modeプロパティは要素同士をどのように混合するかを指定します。

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

{ mix-blend-mode: 値; }

値の指定方法

2.mix-blend-modeの使い方

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

.background { 
 mix-blend-mode: overlay;
}

上記のようにすることで下レイヤー色に応じて、乗算またはスクリーンで合成します。

下レイヤー色が暗い色なら乗算でより暗く合成され、下レイヤー色が明るい色ならスクリーンでより明るく合成されます。

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