文字の中に背景を映す（背景を文字でマスクする）

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

CSSの解説

<p class="background-text">ここにテキスト</p>

/*** 文字の形に切り抜いた背景 ***/
.background-text{
  background-image: url("ここにURL"); /*背景画像*/
  -webkit-background-clip: text;
  color: transparent;
}

1. background-image を使って背景を貼り付ける
2. -webkit-background-clip: textで背景を文字の形に切り抜く
3. テキストをcolor: transparentで透明にする
   ※opacityで文字を透明にしようとすると、背景を含む要素全てが透明になってしまうので注意

応用CSS

背景の表示位置を調整する

背景画像のどこを表示するかはbackground-positionを使うことで、調整できます。

たとえば、背景の表示する領域をbackground-positionで縦方向に変更すると、以下のサンプルのようになります。

See the Pen 背景をテキスト型にクリッピング by チータツ (@cheese_fuji) on CodePen.

アニメーションで動かせば疑似的な動画背景にもできます

おすすめの使い方

• TOPページなどのメインビジュアル
• 魅せたいページのファーストビュー