コーディング

【CSS】背景色に合わせて文字色を自動的に設定する!

  • このエントリーをはてなブックマークに追加
【CSS】背景色に合わせて文字色を自動的に設定する!

こんにちは、ワタナベです。

本日はCSSで背景色に合わせて文字色を自動的に設定する方法のご紹介。

Sample

See the Pen
Untitled
by Akiho (@wcaotdaenpaebne)
on CodePen.

背景色と同じ色を文字色に設定し、「filter」で自動的に文字色が調整されるようになっています。

filterで、

invert(100%)【色反転】grayscale(100%)【グレースケール】contrast(100)【コントラスト】

の設定を行っています。

大体の色は問題なく表示されると思います!中間色だけ注意が必要です。(#808080は「invert()」が効かず、サンプルのようにかなり見づらくなるので避けた方が◎)

 

▼THANKS!

 

それではまた次回。

ご閲覧ありがとうございました♪

  • このエントリーをはてなブックマークに追加

建築に特化したホームページで集客&受注へ

実績の99%が建築業界だからわかる、"受注の取れるWebサイト"づくりを行います。
1000サイト以上の制作実績と、豊富なサービス・運営サポートが御社をバックアップ。お気軽にお問い合わせください!

D-Gripシステム Webサイトへ