mix-blend-mode プロパティ

プロパティ mix-blend-mode は、前景色を背景色または背景画像に対してブレンドするモードを設定します。このプロパティに指定できる値は、主要なグラフィック編集ソフトのブレンドモードと同様です。

構文

cssセレクタ {
  mix-blend-mode: 値;
}

以下の表は、プロパティ mix-blend-mode の主な値を示しています:

値	説明
`normal`	ノーマル。色の混合は行われません。デフォルトのモードです。
`multiply`	乗算。このモードでは、前景色の値が背景色の値に乗算されます。結果の色は常により暗い色になります。
`screen`	スクリーン。このモードでは、前景色と背景色の値を反転して乗算します。結果の色は常により明るい色になります。
`overlay`	オーバーレイ。このモードでは、背景色に応じて色が乗算またはスクリーンされます。パターンや色は既存のピクセルを上書きし、背景色の明るい部分と暗い部分は維持されます。

プロパティ mix-blend-mode のデフォルト値での画像の見え方を確認してみましょう:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: normal;
  width: 400px;
  height: 300px;
}

Результат:

次に、ブレンドモードを乗算に変更してみましょう:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: multiply;
  width: 400px;
  height: 300px;
}

Результат:

プロパティ mix-blend-mode にオーバーレイの値を設定してみましょう:

html<div>
  <img src="bg.png">
</div>

cssdiv {
  background: #C8EAF5;
  width: 400px;
  height: 300px;
}
img {
  mix-blend-mode: overlay;
  width: 400px;
  height: 300px;
}

Результат: