mix-blend-mode 実装デモ

1. テキスト + 画像(Screen)

白い部分は透けず、黒い部分が透ける「スクリーン」の特性を利用し、文字の形に画像を切り抜きます。

下敷き 風景
重ねる要素
TEXT
▼ 合成結果 ▼
風景
TEXT

2. 画像 + 単色(Multiply)

画像の上に単色を重ねて「乗算」。明るい部分に色が乗り、全体の色調を統一できます。

下敷き 山
重ねる要素
▼ 合成結果 ▼
山

3. 画像 + 画像(Overlay)

2つの異なる画像を「オーバーレイ」で合成。下の画像と上の画像のテクスチャが混ざり合います。

下敷き 道
重ねる要素 木の葉
▼ 合成結果 ▼
道 木の葉