背景
background-blend-mode
background-blend-mode は、背景画像どうしや、背景画像と背景色をどう混ぜるかを指定します。1 つの要素の背景だけで、写真に色を乗せたような効果が作れます。
構文<blend-mode># …
<blend-mode>#
<blend-mode> = normal | multiply | screen | overlay
| darken | lighten | color-dodge | color-burn
| hard-light | soft-light | difference | exclusion
| hue | saturation | color | luminosityプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background-image: linear-gradient(90deg, #1f2937, #ffffff);
background-color: #e0951a;
background-blend-mode: multiply;
}コントロール
background-blend-modemultiply
解説
混ざるのは同じ要素の背景の中だけ
背景画像の各レイヤーは、その下のレイヤーと背景色の上に、指定したモードで重なります。いちばん下のレイヤーは背景色と混ざります。要素の後ろにある親の背景やほかの要素とは混ざりません。それらと混ぜたいときは mix-blend-mode を使います。各モードの効き方も mix-blend-mode と同じです。
このページのプレビューでは、黒→白のグラデーションの画像をオレンジの背景色の上に重ねているので、暗い所と明るい所での違いを見比べられます。
レイヤーごとに指定する
カンマで区切ると、background-image に書いた順（上のレイヤーから）に 1 つずつ対応します。数が足りなければ繰り返して使われるので、1 つだけ書けばすべてのレイヤーに効きます。このページのコントロールは 1 つのモードだけを扱います。
よく使う組み合わせ
- 写真を単色に染める：背景色に色を指定し、
luminosityで画像の明るさだけを残します。 - 写真に色を乗せる：
multiplyは暗い色を、screenは明るい色をなじませます。
background の一括指定はこのプロパティをリセットしないので、あとから background を書き直してもモードは残ります。