2022年12月13日(火)

CSSのmix-blend-modeで背景色と文字色を反転させる

• 0
• 5
• 2
• 8

画像の前面に配置するテキストを読みやすくしたり、背景色によって文字色を変えたりと、重なり合う要素の見え方をさまざまな表現方法で調整できるCSSの「mix-blend-mode」プロパティ。

Photoshopで言う、2枚のレイヤーを重ねた際にどのように合成させるかを設定するブレンドモード（描画モード）と同じ機能です。

今までWebページ上ではそういった色の反転などは画像で作成する必要がありましたが、IEがなくなったことにより、CSSで合成できる「mix-blend-mode」が気兼ねなく使えるようになり、今後活用する機会が増えそうなので簡単なサンプル交えて紹介してみます。

［mix-blend-mode: difference;］で背景色と文字色を反転

まずは、背景色と文字色の反転から。

背景色に対して前面に配置するテキストの文字色を反転させるには「mix-blend-mode」プロパティの「difference」を使用します。

.text { mix-blend-mode: difference; }

「mix-blend-mode: difference;」の使い方の一例として、下記のようにテキストの途中で背景色によって文字色を反転させることが可能になります。