⌘K

background-blend-modeプロパティ

background-blend-mode プロパティは、 背景画像と背景色または他の画像との合成モードを指定します。 このプロパティではカンマ区切りで複数の値を指定することもでき、 それらの値は同じ順序で適用されます。 プロパティの値は主要なグラフィック編集ソフトのブレンドモードと同様です。

構文

cssセレクタ {
  background-blend-mode: モード;
}

background-blend-mode プロパティの主要な値を以下の表に示します:

値

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

例

background-blend-mode プロパティのデフォルト値で画像がどのように表示されるか見てみましょう: 

html<div id="elem"></div>
css#elem {
  background-blend-mode: normal;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

では、background-blend-mode プロパティの値を乗算に変更してみましょう: 

html<div id="elem"></div>
css#elem {
  background-blend-mode: multiply;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

例

画像のモードをスクリーンに設定してみましょう: 

html<div id="elem"></div>
css#elem {
  background-blend-mode: screen;
  background: url("bg.png") center / cover no-repeat,
  linear-gradient(#00A8DE, #FFF) fixed;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

関連項目

Backプロパティ backdrop-filterNextmix-blend-mode プロパティ