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

沖縄の海を
満喫しよう！

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

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

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

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

背景画像の設定

CSS

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

background-clipプロパティの設定

CSS

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

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

CSS

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

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

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