背景に文字の切り抜きができるbackground-clipの使い方

Webデザインをする上で、背景とテキストをうまく使った魅力的なデザインで人の目を引きつけたいものです。そこでテキストをマスクして透過部分から背景を見せることのできるCSS3のbackground-clipプロパティをご紹介します。

background-clipプロパティは、背景色や背景画像の描画領域をコントロールするためにborderプロパティと併用して使うことが多いのですが、値をtextとしてあげることでマスクをかけることができます。

2018年3月現在では、主要ブラウザのほとんどがbackground-clipプロパティが対応していますので結構使えます。

実際にどんな感じで使うのかを、自然の風景を背景画像にサンプルを紹介します。

background-clipの使い方

ファーストビューや画面幅のセクションのデザインを想定してサンプルを書いてみます。
まずはHTMLから。

HTML

<main>
  <section class="mask-landscape">
    <h1>GREEN</h1>
  </section>
</main>

テキストを画面の中央に配置してみたいと思います。
まずは普通にセクション自体に背景画像を設定。
そのあとbackground-clipでtextを設定。（念の為webkitも書いておく）
テキスト部分を透過させるのでcolorはtransparentにします。

CSS

main {
  background: #eee;
}
 
.mask-landscape {
  background: url("../images/bg-sample.jpg") center;
  background-size: contain;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: table;
  width: 100vw;
  height: 100vh;
}
 
h1 {
  font-size: 20vw;
  font-weight: bold;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

よくある画面中央への配置ですが、よくpositionプロパティを使った方法をされる人も多いですが、background-clipでマスクをかける場合はpositionプロパティでうまくマスクをかけることができないので、displayプロパティでテーブルレイアウトにして、「text-align: center;」と「vertical-align: middle;」で中央にもってきます。

上記のコードでこのような表示になります。

以下、ここまでの実装の動きになります。
「background-clipプロパティ」と「color: transparent;」がポイントです。
動画（2分ほど）

背景画像を変えたりフォントを変えたりと、いろいろ試してみてください。

まとめ

冒頭にもお話ししましたが、主要ブラウザはほとんど対応していますので、背景とテキストをうまく使った凝ったデザインができます。
また背景をGIFアニメにしてみるのも動きがあって面白いかもしれないですね。
GIFアニメでなくてもCSSの@keyframesやanimation関連のプロパティを使って背景をアニメーションさせてあげるとか。