ページのイメージ
WEB開発デザイン 2019/09/06

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で作っているので、画像の差し替えもテキストの差し替えも簡単にできるのがいいですね。 ぜひ色々試してみてください!

 

 


しずおかオンライン中途採用社員も、積極募集中!
「womo」「イエタテ」のスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら!

Category

Ranking