背景ブレンドモードプロパティ

最終更新：2026-09-13

background-blend-mode 背景ブレンドモードプロパティ

background-blend-mode は、要素の背景画像同士、および背景画像と背景色の間のブレンドモード（混合モード）を設定します。multiply、screen、overlay などのモードをサポートしており、Photoshop のレイヤー合成と似ています。CSS3 で追加され、リッチな視覚効果に適しています。

カテゴリ
初期値	normal
継承	いいえ
適用対象	all
アニメーションタイプ	discrete
CSS バージョン	CSS3
状態	標準

📝 構文

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

⚙️ 値

値	タイプ	説明
`normal \| multiply \| screen \| overlay \| darken \| lighten \| color-dodge \| color-burn \| hard-light \| soft-light \| difference \| exclusion \| hue \| saturation \| color \| luminosity`	キーワード	背景のブレンドモード

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
background-blend-mode	✓ v30	✓ v12	✓ v30	✓ v9	✓ v16
すべての主要ブラウザーでサポート

ヒント： 複数の背景画像に対応させるには、カンマで区切って複数のブレンドモードを設定します。例: background-blend-mode: multiply, screen;。

注意： background-blend-mode は要素を他のページコンテンツとブレンドするものではありません。要素同士のブレンドには mix-blend-mode を使ってください。

❓ よくある質問

Qbackground-blend-mode と mix-blend-mode の違いは？

Abackground-blend-mode は要素自身の背景レイヤー——背景画像同士、および背景色との間——をブレンドします。mix-blend-mode は要素自体をその下のページコンテンツとブレンドします。前者は要素内部の背景レイヤーに作用し、後者は要素全体とページの残りの部分の間に作用します。テキストの可読性を高めるために背景画像を暗くするだけなら、background-blend-mode で十分です。

Qよく使われるブレンドモードは？

Amultiply は色を掛け合わせて結果を暗くするため、明るいテクスチャに暗い色合いを重ねたり、テキストの可読性のために背景を暗くしたりするのに適しています。screen は明るくし、光る効果に向いています。overlay は両方を組み合わせてコントラストを強調します。darken/lighten はチャンネルごとの極端な値を選び、difference は創造的な反転効果を生みます。概ね、結果は Photoshop のレイヤー合成と似ています。

Qbackground-blend-mode はどの値をサポートしますか？

A16 の値をサポートします: normal、multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity です。

Qブレンドで背景画像を暗くし、テキストを読みやすくするには？

A暗い背景色と multiply を使います: background-image: url(bg.jpg); background-color: rgba(0,0,0,.5); background-blend-mode: multiply;。暗い色を掛け合わせることで画像が暗くなり、テキストのコントラストが上がります。IE はブレンドに対応していないため、単色のフォールバックを用意しておいてください。