文字を透明にするCSS

タイトル通り、文字を透明にするCSSです。

color: transparent;

以下私が使った例です。

見出しに画像を出力したかったのですが、テンプレートの仕様上、見出しにはテキストしか出力できませんでした。
そこで、力技を使いテキストを画像に変更するため、文字色をcolor: transparent;で透明にしてbackground-imageで画像で指定し出力させました。

簡単な流れとしては、

テキストを配置する
color: transparent;にして文字を消す
background-imageで背景画像を設置

正直そんなに使いみちはありません。

この記事を書いた人

けいた

高校卒業してから15年間勤めた会社を退職→脱サラしてWeb制作。
現在はWordPressサイト構築とShopifyストア構築をメインに、副業で物販をやっています。