まず、mixed-blend-modeプロパティは、要素に対してブレンドモードを指定します。ブレンドモードは、要素の背景と内容の色がどのように混ざるかを決定します。
以下のコード例を見てみましょう。
.container {
background-color: red;
mix-blend-mode: multiply;
}
.content {
background-color: blue;
}上記のコードでは、.containerというクラスを持つ要素の背景色を赤に設定し、mix-blend-modeプロパティをmultiplyに指定しています。それに対して、.contentというクラスを持つ要素の背景色を青に設定しています。
この場合、.containerの背景色と.contentの背景色がブレンドされます。multiplyというブレンドモードは、色を乗算して結果の色を生成するため、赤と青が混ざって紫の背景色が得られます。
他にも、以下のようなブレンドモードがあります。
normal: ブレンドを無効にし、要素の背景と内容が通常通り表示されます。screen: 色をスクリーン合成し、明るい色を強調します。overlay: 色をオーバーレイ合成し、高コントラストな効果を与えます。darken: 色を比較してより暗い色を選択します。
これらのブレンドモードは、mix-blend-modeプロパティの値として使用できます。
以上が、mixed-blend-modeプロパティの基本的な使い方とコード例です。他にもさまざまなブレンドモードがありますので、興味があれば試してみてください。素敵なデザインを作成するために、CSSのmixed-blend-modeプロパティを活用しましょう！