【CSS】background-clip: textで背景を文字の形に切り抜く

株式会社ココロファン - エンジニアリング事業部所属のhazamaです。

サイト制作・運用業務をメインに行っています。
最近はWordPressを触る機会が増えたので、関連した記事を書こうと思ったのですが、
CSSで面白そうなものを見つけたので、ちょっと調べてみました。
##background-clipとは

background-clip は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。

引用：https://developer.mozilla.org/ja/docs/Web/CSS/background-clip

本記事では、「text」を指定しますが、引用にもある通り「border-box、padding-box」なども指定でき、主な役割としては要素の背景領域をコントロールするプロパティのようですね。
##使用できるブラウザ

引用：https://caniuse.com/background-clip-text

Opera Miniはサポート外ですが、主要なブラウザは抑えているようなので問題なさそうですね。
IEは知りません。
##やってみる
まずは適当な要素を準備

<p class="font-gr">株式会社ココロファン - エンジニアリング事業部所属のhazamaです。</p>

スタイルを記述する。
この時、文字色を透明にする必要があります。

.font-gr {
  color: rgba(0,0,0,0);
  -webkit-background-clip: text;
  background-image: url(./test.jpg);
  text-align: center;
  font-size: 60px;
}

##結果
次のように表示されました

ちなみに元画像はこちらです。

背景画像が文字の形に切り抜かれていますね。
chromeで見た時にベンダープレフィクスないと表示が上手くいきませんでしたが、比較的簡単に実装できました。
文字サイズをもっと大きくして、映える画像を用意していけばTOP画像代わりというのも出来そうです。
（この辺はデザインと要相談ですが）

また調べたところbackgroundでグラデーションかければ、文字にグラデーションかけることも可能なようです。
画像を使用せずに実装できるのは個人的にgood!!

「background-clip」は一昔前に出たプロパティですが、年々CSSで出来ることが広がっていて良いですね。今回は「text」だけに留めてしまいましたが、時間があれば「border-box」なども試してみたいと思います。