画像で塗りつぶされた文字
文字の中身がグラデーションや画像で塗られ、その模様が文字の形に透けて見えるテキストクリップのテクニックです。 background にグラデーション（や画像）を敷き、 background-clip: text で文字の輪郭だけに表示を限定し、文字本体の color を transparent にして背景を覗かせて…
解説
文字の中身がグラデーションや画像で塗られ、その模様が文字の形に透けて見えるテキストクリップのテクニックです。background にグラデーション（や画像）を敷き、background-clip: text で文字の輪郭だけに表示を限定し、文字本体の color を transparent にして背景を覗かせています。画像を文字の形で切り抜くのと同じ効果を、要素を増やさずCSSだけで実現できるのが利点です。
使いどころ
- 季節キャンペーンやファッション系の装飾的な大見出し
- 写真の雰囲気を見出しに溶け込ませたいビジュアル重視のページ
- ロゴ風に1語だけ強調したいタイトル
グラデーションの代わりに url() で写真を指定すれば、画像で塗られた文字にもできます。模様がはっきり見えるよう、font-weight を太く、文字を大きくするのがコツです。色や画像を差し替えるだけで印象が一変します。background-clip:text は -webkit- 付きの指定も併記すると対応範囲が広がります。背景が透けるぶん細い書体だと模様が読み取りにくいので、太めの書体を選ぶと美しく仕上がります。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
グラデーションではなく写真で塗れますか？
塗れます。background にグラデーションの代わりに url() で画像を指定すれば、その写真が文字の形に透けて見えます。模様がよく見えるよう太く大きな文字にするのがおすすめです。
文字が見えなくなってしまいます。
文字の color を透明にして背景を透けさせる仕組みのため、background-clip の指定が効いていないと中身が消えて見えます。webkit 付きの指定も併記し、背景がきちんと設定されているか確認してください。