【おしゃれ・クール】CSSの「background-clip: text;」を使って文字型に背景画像を表示させる方法

CSSのbackground-clipというプロパティを使って、テキストを配置し、その文字の形状に（くり抜いたように見せる）背景画像を表示させる方法をご紹介します。

サンプル

この記事の目次

「.text」のボックスを用意するだけ。

「.text」に背景画像、文字サイズ、などの一般的なスタイルを設定します。

次に「-webkit-background-clip: text;」を使って文字の形状にクリップして背景が表示されるようにします。

次に「color: rgba(0, 0, 0, 0.2);」で、文字の色と透明度を設定します。