CSS3：フォントで画像をマスクする

CSSでフォントをマスク化する方法です。
マスクされてることが分かりやすいようhoverアニメーションも付けてます。

CSS

マスクに関わる箇所は以下の部分です。

h1 {
  〜
  color: transparent;
  background: url("{画像}") center center;
  background-clip: text;
  -webkit-background-clip: text;
  〜
}

background-clip: text;

このプロパティで背景の適用範囲を決めます。今回は text を指定することで、テキストの範囲のみに背景を適用するという形になっています。

しかしテキスト自体には色がついているため、 color: transparent で透明にすることで背景画像だけがマスクされて見えるという仕組みです。

現状 background-clip: text はChrome用のベンダープレフィックスが必要なようです。