ここでは、こんな感じでテキストが背景画像になっているというか、背景画像をテキストで切り抜く方法について見ていきます。

沖縄の海を
満喫しよう！

文字の背景が海になっているの分かりますか？

背景画像をテキストで切り抜く方法

この背景画像がテキストになっているものをここでは「背景画像テキスト」と呼ぶことにしましょう。作り方下記の３ステップです。

1. 背景画像の設定
2. background-clipプロパティの設定
3. colorプロパティでテキストを透明にする

背景画像の設定

See the Pen clip_text01 by kenichi (@ken81) on CodePen.

CSS

p.text_clip{
  background: URL(https://cotodama.co/wp-content/uploads/2018/04/199771977.jpg);
}

背景画像テキストにしたいp要素などにクラスを入れて背景画像を設定します。ここでは「text_clip」というクラス名を入れました。

background-clipプロパティの設定

See the Pen clip_text02 by kenichi (@ken81) on CodePen.

CSS

p.text_clip{
  background: URL(https://cotodama.co/wp-content/uploads/2018/04/199771977.jpg);
  -webkit-background-clip: text;
}

背景を設定したのと同じ要素に-webkit-background-clip: text;を指定すると、背景画像がテキストで切り抜かれます。ここではまだテキストに色が付いているので背景画像が見えていません。

colorプロパティでテキストを透明にする

See the Pen clip_text03 by kenichi (@ken81) on CodePen.

CSS

p.text_clip{
  background: URL(https://cotodama.co/wp-content/uploads/2018/04/199771977.jpg);
  -webkit-background-clip: text;
  color: transparent;
}

ここまで来たらあと少しです。color: transparent;を指定してテキストを透明にします。これでテキストの下にある画像が透けて切り抜きされたように見えるようになります。

最後にお好みに合わせてデザインを調整

See the Pen clip_text04 by kenichi (@ken81) on CodePen.

あとは文字を大きくしたり、背景画像の大きさや位置を調整すれば完成です。