【CSS】マスクで画像をテキストの形にクリッピングする方法

CSSを使って、画像をテキストの形でマスクしてみましょう。
background-clip: text;を使用することで、背景画像を文字の形で切り抜くことができますよ。

画像を文字の形で切り抜く

background-clip プロパティは、要素の背景の色や画像をどこまで拡張するか設定できます。

background-imageプロパティで、表示させたい画像を背景におきます。
その上で、background-clip: text;を指定するだけで、画像を文字の形にマスクすることができます。

.text{
  margin:20px;
   line-height: 1.1;
   font-size: 60px;
   font-weight: bold;
   color: rgba(0,0,0,0);
   background-image: url(画像URL); 
   -webkit-background-clip: text;  
}

この時、ブロック要素に適用した場合と、インライン要素に適用した場合では、画像のはめ込まれ方が変わりますので、注意してください。
画像を全面に敷くだけではなく、パターンを使用して文字をあしらったり、文字色を半透明にした上で背景も設定してみたりと、工夫次第で色々とテキストの装飾が可能ですね。

background-clipでできるデザインアイデア

background-clipをうまく使うことで、効果的なデザインをすることが可能です。

メイン画像風のタイトルを作成してみました。視認性を高めるために、テキストには薄く黒を敷いています。
白背景の枠線は、box-shadowを重ねがけすることで表現しています。

まとめ

CSSで作っているので、画像の差し替えもテキストの差し替えも簡単にできます。 ぜひ色々試してみてくださいね。