【CSS】画像を文字で切り抜く

CSSを使って画像をテキストの形で切り抜く方法を紹介します。PhotoshopやIllustratorなどでマスクを使って切り抜いたりできますが、それに近い感じをCSSでも表現することができます。

background-clipを使う

CSSのプロパティである「background-clip」を使えば、簡単に画像を文字で切り抜くことができます。

.clip {
  background-image: url(photo.jpg);
  -webkit-background-clip: text;
  color: transparent;
}

background-clipプロパティの値に「text」を指定して、テキストカラーを「transparent」で透過させれば、文字の形で画像が切り抜かれたように表示されます。

ブラウザの対応状況にもよりますが、機会があれば試してみてください。

また、background-clipプロパティを使って、文字にグラデーションをかけることもできます。