以前、Photoshopでクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。
background-clip
background-clipプロパティは、背景の適用範囲を指定する際に使用します。テキスト部分に背景画像を適応させたい場合、
background-clip: text;
と指定します。
※注意 2017月12月現在、-webkit-のベンダープレフィックスが記述が必要です。
さらに「text-fill-color」を transparentに指定する事で文字色を透過にする事が出来ます。transparentの代わりに「color: rgba(0,0,0,0);」でもOKです。
text-fill-color: transparent;
https://codepen.io/Jintos/full/crlxk/codepen.io
