サンプル

See the Pen Codepen by Tora (@webtoranomaki) on CodePen.

コード

この記事の目次

html

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

CSS

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

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

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