福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > 【CSS】背景と文字の色を反転させたい!(mix-blend-mode)

SUGOYOKU BLOG

【CSS】背景と文字の色を反転させたい!(mix-blend-mode)

はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。

CSSの「mix-blend-mode:differnce;」を用いた背景と文字の色の反転について解説します。背景の色や画像によって文字の色を部分的に変更させたいときにとても便利です。仕組みがわかれば簡単に扱えますので、なるべくわかりやすくお伝えできればと思います。

CSSの「mix-blend-mode」プロパティ

そもそも「mix-blend-mode」とは?


CSSの「mix-blend-mode」プロパティは、子要素の中身・背景とその親要素の中身・背景の色をどのように混合(ブレンド)させるかを設定することができます。

・normal:初期値。背景色をブレンドしない。

・multiply: 絵の具を混ぜた合わせたような色合いに変化する。

・screen:スクリーンを重ねたような(光の三原色のイメージ)色合いに変化する。

……などなど、さまざまな値によるブレンドが用意されています。


「mix-blend-mode: differnce;」について


背景色と文字の色を反転させるには、「mix-blend-mode: differnce;」を使うと簡単です。「mix-blend-mode:differnce;」は、親要素と子要素に指定されているR・G・Bのそれぞれの値の差の絶対値をとります。値の差の絶対値???となるかもしれませんが、カラーコードではなくRGB値で理解するとわかりやすいです。具体的に白と黒の反転でご説明します。


HTML CSS

背景と文字の色反転

「値の差の絶対値」ということで、親要素のbackground: rgb(256, 256, 256);から子要素のbackground: rgb(256, 256,256);の値を引き算してみましょう。256-256=0となるため、子要素が重なっている部分のbackgroundはrgb(0, 0, 0)ということになります。
つづいて、親要素のcolor: rgb(0, 0, 0);から子要素のbackground: rgb(256, 256, 256);の値を引き算すると、0-256=-256になります。マイナス……!?と思いきや絶対値をとるので、子要素が重なっている部分のcolorはrgb(256, 256, 256)ということになります。




大事なポイント

「mix-blend-mode: differnce;」とbackground: rgb(256, 256, 256)のセット


「mix-blend-mode: differnce;」は「値の差の絶対値」を使用するため、rgb(0, 0, 0)の黒ではなくrgb(256, 256, 256)の白を活用する必要があります。この白背景の子要素が、親要素の色を指定された部分に重なったときに「mix-blend-mode: differnce;」による色の反転が発動するイメージです。



おわりに


背景と文字の色を反転させたい!という方、「mix-blend-mode:differnce;」がうまく効かない……という方に参考にしていただけたら嬉しいです。

2023年IT導入補助金でお得にECサイト

IT導入補助金でお得にECサイト

【実践マーケティング手法22選】 無料ダウンロード

マーケティング手法22選

助成金・補助金・融資・M&A等の総合経営支援サービス「あなたのアイボー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。


補助金 お問い合わせ

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得