[CSS] 背景色に負けない文字の表示方法「mix-blend-mode」のクセを理解する

存在は知っていたけど、これまであまり使いこなせていなかった、CSSのmix-blend-modeについて色々と調べて分かったことを書き残しておきます。

こんな経験ありませんか？

・背景に画像をおいた時に、その手前で表示している文字が見えづらくなってしまった。 ・背景に設置する画像はランダムに切り替わるのでコントロールできない。 ・背景画像は、色彩などを変更できない。 文字色と同系色の背景画像だと、文字が見えづらくなりますよね。

mix-blend-mode設置

こんな場合には、mix-blend-modeを使うと、文字色がいい感じに背景に馴染んでくれます。 .text{ mix-blend-mode:difference; } たったこれだけで、文字色が馴染んでくれます。 mix-blend-modeをセットしたエレメントが背景画像に合わせてブレンドしてくれます。 photoshopのレイヤーブレンドのような機能だと考えると分かりやすいでしょう。

疑似要素に対しても有効

複雑になりがちな疑似要素が加わっていても、ちゃんとブレンドモード（mix-blend-mode）は動作します。

どのモードを使えばいいの？

mix-blend-modeは、たくさんのモードが用意されています。 上記のように、背景色の逆の色を表示したいのであれば、"difference"を指定しておけば良いのですが、背景が白黒はっきりしている場合であれば問題ないのですが、グレーなどの表示の場合は、文字色もグレーになってしまいます。

モード一覧

1. normal
2. multiply
3. darken
4. screen
5. lighten
6. overlay
7. color-dodge
8. color-burn
9. hard-light
10. soft-light
11. difference
12. exclusion
13. hue
14. saturation
15. color
16. luminosity

サンプル

normal multiply darken screen lighten overlay color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity 背景画像により、最適なモードが違っているのが分かると思います。 無難なのはやっぱりdifferenceなんでしょうかね？

リファレンスサイト

https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode

別の方法（古来からの手法）

なんだかんだ言っても、mix-blend-modeがない時代からのセオリーのやり方を書いておきます。 デザイン構築の参考までにどうぞ

土台設置方式

うっすらと半透明でいいので、対比色の土台を設置するだけで、文字が確実に見えるようになります。

影付け方式

文字に対比色の影を付けるだけで読みやすくなります。 .text{ text-shadow:2px 2px 4px rgba(0,0,0,0.7); }

そもそも、画像にオーバーレイしない！

これを言っちゃあ、おしまいよ！ でも、そもそも、画像の上に文字を表示するリスクを理解している人は、こんなデザインは作りませんwww。 でも、動きが楽しいホームページを作ろうとしたらどうしてもインタラクティブに色調整をしたい場合がありますよね。 そんな時に、今回紹介した、mix-blend-modeを使いこなせると、楽に困難な場面を乗り越えられるかもしれませんね。

使えるブラウザを調べる

https://caniuse.com/?search=mix-blend-mode