Bricksの背景の設定について機能を紹介します。
Bricks と Elementor の背景機能の違い
下図は Elementor の背景（Background）設定画面です。
単色・グラデーション（上図で選択されているモード）・動画・スライドショーを選択できます。
一方、下図は Bricks の背景設定画面です。
単色・画像・動画が選択できます。
Elementor と比べると グラデーションの選択肢がない ように見えますが、実はその他にも違いがあります。
たとえば Bricks では 単色と画像を組み合わせて背景として適用 できます。
上図では、緑色の背景にグレーの画像を重ねて、特殊な質感の背景を作っています。
（※ Elementor の場合は「背景オーバーレイ」に画像を設定することで、同様の効果を再現可能です。）
Bricksのブレンドモードの機能と効果
Bricks で背景に画像を使用する場合、ブレンドモード（Blend Mode） を設定できます。
モードは以下の 15 種類から選択可能です。
Normal、Multiply、Screen、Overlay、Darken、Lighten、Color-dodge、Color-burn、Hard-light、Difference、Exclusion、Hue、Saturation、Color、Luminosity
それぞれのモードによって、背景色と背景画像の重なり方（混ざり方）が変わり、さまざまな表現が可能になります。
1. normal（標準）
最も普通のモード。
上の色をそのまま描画するだけ。合成なし。
2. multiply（乗算）
暗くなるモード。
上の色と下の色を「掛け算」するため、
- 全体が 濃く・暗く なる
- 黒を重ねると真っ黒
- 白を重ねても変化しない
影色やしっとりした質感に。
3. screen（スクリーン）
multiply の逆。明るくなる。
- 上下の色を反転 → multiply → 反転
- 全体が 淡く・明るく なる
- 白を重ねると真っ白
- 黒を重ねても変化しない
光やハイライトの効果に。
4. overlay（オーバーレイ）
multiply + screen の中間。
下の色の明るさによって使い分ける。
- 暗い部分 → multiply（暗くなる）
- 明るい部分 → screen（明るくなる）
- コントラストが強めになる
画像をパキッとさせたい時に。
5. darken（比較（暗））
上下の色を比較して 暗い方を採用。
6. lighten（比較（明））
上下の色を比較して 明るい方を採用。
7. color-dodge（覆い焼きカラー）
非常に明るくなる。
- 下の色を明るくし、彩度が上がる
- 白に近づきやすい
- ハイライト爆発しやすい
強い光・フラッシュ効果に。
8. color-burn（焼き込みカラー）
ものすごく暗く、濃くなる。
- 黒に近づきやすい
- 彩度が強烈に上がる
深い焼き込み・ドラマチックな色に。
9. hard-light（ハードライト）
overlay の逆パターン。
- 上の色が明るい → screen
- 上の色が暗い → multiply
コントラストが強いメリハリ。
10. difference（差の絶対値）
上下の色の差分を絶対値で計算。
- 黒を重ねる → 変化なし
- 白を重ねる → 色が反転
ネガポジ・エフェクト系に向いてる。
11. exclusion（除外）
difference のソフト版。
- 黒 → 変化なし
- 白 → やや反転
- 輪郭が柔らかい
不思議な色合いのエフェクト。
12. hue（色相）
色相だけ前景から取り、明度・彩度は背景のまま。
＝背景の明るさや濃さを保ったまま、色味だけ変わる。
13. saturation（彩度）
彩度だけ前景から取り、色相と明度は背景。
＝背景の色相は変えずに「鮮やかさ」だけ変わる。
14. color（カラー）
色相＆彩度を前景、明度を背景。
- Photoshop の “カラー” と同じ
- 白黒写真に色を乗せるのに使える
15. luminosity（輝度 / 明度）
前景の明度×背景の色相と彩度。
- color の逆（色は背景のまま、明るさだけ変わる）
まとめ
今回紹介したブレンドモードはCSSをそのままUIにしただけなので、挙動・意味・ブレンドの見え方は基本的にCSSと同じです。
