mix-blend-mode でノックアウト文字（透過文字）を作る
黒背景＋白文字に mix-blend-mode: multiply を当てると、文字部分だけ下の背景が透ける「切り抜き」表現になる。
どんな時に使う？
写真やグラデーションの上にステッカー風のラベルを載せたいとき。文字色を透過 PNG で切り抜かなくても、CSS だけで背景を見せたまま文字を読ませられる。バッジ・ウォーターマーク・オーバーレイ UI に向く。
コード
css
.sticker {
background: #000;
color: #fff;
mix-blend-mode: multiply;
/* 必要なら padding / border-radius でステッカー形状に */
}multiplyは「乗算」。白（1,1,1）は相手の色をそのまま通し、黒（0,0,0）は相手を暗くする。結果として白文字が「穴」になり、黒の枠だけが残る。- 背景が明るい写真だと黒枠がはっきり見える。暗い背景では見えにくくなるので、配置場所を選ぶ。
注意点・対応状況
mix-blend-modeは主要ブラウザで広く対応済み。ただし親にisolation: isolateや別のブレンドがあると意図と違う結果になることがある。- テキストの可読性が落ちやすいので、コントラストが足りない背景では使わない。アクセシビリティ上、装飾用途に留めるのが安全。
- 黒／白以外の色でも似た効果は出せるが、乗算の挙動を理解してから色を変える。