存在は知っていたけど、これまであまり使いこなせていなかった、CSSのmix-blend-modeについて色々と調べて分かったことを書き残しておきます。
こんな経験ありませんか？
・背景に画像をおいた時に、その手前で表示している文字が見えづらくなってしまった。 ・背景に設置する画像はランダムに切り替わるのでコントロールできない。 ・背景画像は、色彩などを変更できない。
Sample Text View
mix-blend-mode設置
こんな場合には、mix-blend-modeを使うと、文字色がいい感じに背景に馴染んでくれます。
Sample Text View
.text{
mix-blend-mode:difference;
}
たったこれだけで、文字色が馴染んでくれます。
mix-blend-modeをセットしたエレメントが背景画像に合わせてブレンドしてくれます。
photoshopのレイヤーブレンドのような機能だと考えると分かりやすいでしょう。
疑似要素に対しても有効
複雑になりがちな疑似要素が加わっていても、ちゃんとブレンドモード（mix-blend-mode）は動作します。
Sample Text View
どのモードを使えばいいの？
mix-blend-modeは、たくさんのモードが用意されています。 上記のように、背景色の逆の色を表示したいのであれば、"difference"を指定しておけば良いのですが、背景が白黒はっきりしている場合であれば問題ないのですが、グレーなどの表示の場合は、文字色もグレーになってしまいます。モード一覧
- normal
- multiply
- darken
- screen
- lighten
- overlay
- color-dodge
- color-burn
- hard-light
- soft-light
- difference
- exclusion
- hue
- saturation
- color
- luminosity
サンプル
Sample Text View
リファレンスサイト
https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode別の方法（古来からの手法）
なんだかんだ言っても、mix-blend-modeがない時代からのセオリーのやり方を書いておきます。 デザイン構築の参考までにどうぞ土台設置方式
Sample Text View
影付け方式
Sample Text View
.text{
text-shadow:2px 2px 4px rgba(0,0,0,0.7);
}
そもそも、画像にオーバーレイしない！
これを言っちゃあ、おしまいよ！ でも、そもそも、画像の上に文字を表示するリスクを理解している人は、こんなデザインは作りませんwww。 でも、動きが楽しいホームページを作ろうとしたらどうしてもインタラクティブに色調整をしたい場合がありますよね。 そんな時に、今回紹介した、mix-blend-modeを使いこなせると、楽に困難な場面を乗り越えられるかもしれませんね。使えるブラウザを調べる
https://caniuse.com/?search=mix-blend-mode
