1. >
  2. >
  3. 背景画像の上の文字を切り抜きたい【css】background-clip

背景画像の上の文字を切り抜きたい【css】background-clip

更新日:

画像の上に文字を置いてベタ色を塗るのではなく、
ちょっとおしゃれに、文字の形に切り抜いてみたり、文字の部分だけオーバーレイをかけてみたりしてみます。

切り抜くときに使うのは、background-clip。

クロームやsafariでは対応していないので注意してください。

切り抜きはbackgroundで画像を読んでpを切り抜いている感じなので、ほぼcssの調整だけでできるので便利。

切り抜いてみるDEMO

切り抜いてみた感じ
test

切り抜くCSS

切り抜くHTMLはこれだけ

今度オーバーレイにチャレンジ。こちらも背景で出している画像の上に文字を乗せてみます。
cssでは文字を画像の上に単純に乗せただけなので、positionで調整するといい感じになります。

オーバーレイっぽいDEMO

オーバーレイしてみた感じ
test

オーバーレイっぽくするCSS

オーバーレイっぽいHTML

どちらも背景で作れるから、見出しとか見せたいところを表現するときに知ってると便利です。

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る