CSSでフォントをマスク化する方法です。
マスクされてることが分かりやすいようhoverアニメーションも付けてます。
See the Pen CSS3 Text Mask by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.
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用のベンダープレフィックスが必要なようです。