# background-blend-mode

> 背景画像と背景色、または複数の背景画像同士のブレンド方法を指定するプロパティです。multiply、screen、overlay等の値があり、Photoshopのようなブレンド効果を実現できます。

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/background-blend-mode/

## 構文

```css
background-blend-mode: normal | multiply | screen | overlay | ...
```

## Tailwindでは

- `bg-blend-multiply` → background-blend-mode: multiply
- `bg-blend-overlay` → background-blend-mode: overlay
- 一般形: `bg-blend-{mode}`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 35+ / Firefox 30+ / Safari 8+ / Edge 79+

## コード例

### 例1: 背景画像を乗算合成

```css
background-blend-mode: multiply;
```

### 例2: 背景画像をスクリーン合成

```css
background-blend-mode: screen;
```

## TIPS

画像にカラーオーバーレイをかけたり、デュオトーン効果を作成できる。filterと組み合わせるとさらに多彩な表現が可能。

## よくある間違い

background-colorも指定しないと効果が分かりにくい場合がある。mix-blend-modeとの違いに注意。

## AIがよく間違えるポイント

mix-blend-mode（要素同士）とbackground-blend-mode（同一要素内の背景レイヤー同士）の混同はAIの定番です。「写真に色を被せるダブトーン」は背景画像+背景色をbackground-blend-modeで混ぜるのが正攻法で、要素を重ねる必要はありません。

## AIへの依頼文例

- ヒーロー写真をブランドカラーのダブトーン風にしたい。要素を重ねずbackground-blend-modeで実装して

## 関連プロパティ

- [background-image](https://www.css-dictionary.com/property/background-image.md)
- [background-color](https://www.css-dictionary.com/property/background-color.md)
- [mix-blend-mode](https://www.css-dictionary.com/property/mix-blend-mode.md)
- [filter](https://www.css-dictionary.com/property/filter.md)