【可変対応】中のテキストをはっきり表示させたまま、ブレンドモード（mix-blend-mode）を使おう！

【可変対応】中のテキストをはっきり表示させたまま、ブレンドモード（mix-blend-mode）を使おう！ 『乗算』などを再現できるcssのブレンドモード（mix-blend-mode）。 大変便利なのですが、背景色だけ乗算をして文字はそのまま…ということが工夫をしないと地味に難しかったりします。 上の画像のように表現をしたかったのに、何も考えずに背景色と一緒にブレンドモード（今回は乗算）を設定すると以下のような感じになってしまいます。 See the Pen ブレンドモード（テキストが埋もれる） by kkdd (@kk8kk) on CodePen. 要はテキストも一緒に乗算になっているので想定したデザインのようになりません。 ということでひと工夫が必要です。 例えばabsoluteを使って固定の幅・高さで設定したらあっという間にできます。 が、可変に対応できずいまいち汎用性がありませ