mix-blend-mode 実装デモ
1. テキスト + 画像(Screen)
白い部分は透けず、黒い部分が透ける「スクリーン」の特性を利用し、文字の形に画像を切り抜きます。
下敷き
+
重ねる要素
TEXT
▼ 合成結果 ▼
TEXT
2. 画像 + 単色(Multiply)
画像の上に単色を重ねて「乗算」。明るい部分に色が乗り、全体の色調を統一できます。
下敷き
+
重ねる要素
▼ 合成結果 ▼
3. 画像 + 画像(Overlay)
2つの異なる画像を「オーバーレイ」で合成。下の画像と上の画像のテクスチャが混ざり合います。
下敷き
+
重ねる要素
▼ 合成結果 ▼