【CSS】画像をテキストでマスクをかける方法

2024.11.20

【CSS】画像をテキストでマスクをかける方法

「マスク」って普通に使ってますが、一般的な言葉なのでしょうか？
皆さんおそらく日常的にIllustratorや、Photoshop、XDを使っているので、「マスク」で意味が通じるのでしょうけど、どうなんでしょう。。。

マスクとは？

簡単に言うと、画像を任意の形に切り抜くことです。

clip-pathを使えば、CSSだけで画像を四角、丸、多角形などに切り抜くことも出来ます。

今回は背景画像をテキスト入力した文字の形に切り抜く方法をご紹介します。
clip-pathではなく、background-clipを使います。

CSSの書き方

CSS
p {
  font-size:120px;
  font-weight:bold;
  text-align: center;
  background: url(https://www.nan-demo.work/wp-content/uploads/2022/07/image07.jpg) no-repeat 50% 50%;
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

解説

pタグの背景に画像を配置、「background-clip：text；」でテキストをマスクします。
文字の色を透明（transparent）にすることで背景の画像をテキストの形でマスクをかけることが出来ます。
文字の色を透明（transparent）にしなかったら、背景は切り抜かれているのですが、文字の色はデフォルトとなり、背景の画像は見えないままになります。

また、背景画像のサイズを「cover」にしているので、ブラウザのサイズを変えると文字の中の画像も可変します。