こんなのあるんだ！というプロパティを見つけたので、簡単にまとめ。
もしかしたら今後使う機会があるかもしれませんしね。
それがこちらの「mix-blend-mode」プロパティです。
mix-blend-mode – CSSリファレンス
http://www.htmq.com/css/mix-blend-mode.shtml
このプロパティは、背景色とその要素の色の重なり方を指定できるものです。
初期値は normal で、要素に背景色ををブレンドしない状態です。
使いそうなのは、乗算の multiply と、光を重ね合わせたようになる screen、下レイヤー色に応じて、multiply か screen になる overlay くらいでしょうか。
他にもたくさん種類がありますが、使いこなせそうにないので、とりあえずこのあたりだけでも覚えておけばいいのではと思います。
なお、上記の記事に、ブラウザ上での表示例が載っているので、参考にしてください。
もしくは、こちらの記事に載っているサンプルも分かりやすくておすすめです。
mix-blend-mode – CSS:カスケーディングスタイルシート｜MDN
https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode
以上、背景色と要素の色の重なり方を指定できるプロパティ「mix-blend-mode」のご紹介でした。
是非、ご活用ください。
