兵庫県三田市でホームページ製作をしているゴリラドットです。

今日は文字で画像を切り抜く方法ってどうやるの？を紹介したいと思います。cssだけでさくっとできちゃうのでやってみてくださいね。

完成イメージ：

DEMO-DAYO!

 

background-clipがキモ！

文字で画像を切り抜いてカラフルにするにはbackground-clipというcssがキモ。いきなり使い方を書きますね。

 

css

#test1{
background:url('○○');
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

 

HTML

<div id="test1">DEMO-DAYO！</div>

 

大事なのはcssの2行目の「background-clip」と4行目の「color:transparent」！

「background-clip」で文字で画像をクリップ（切り抜く）するよ！と設定していて、「color:transparent」で文字の色を透明にしてね！と設定しています。

画像を文字で切り抜いていても文字の色が透明じゃないと切り抜いてるのにもかかわらず文字の色の方が前に出ちゃって切り抜いた画像が表示されないんです。

「background-clip」と「color:transparent」で画像を文字で切り抜ける！

 

注意点①入れ子じゃダメ！

ここからはcssで画像を文字で切り抜く方法の注意点を。

まず1個目の注意点は画像を設定する要素と文字の要素が違うとダメ！というコト。例えば、

 

HTML

<div id="test1">
<p>DEMO-DAYO！</p>
</div>

 

こんな風に文字が入れ子になっちゃってる（子要素になっちゃってる）と文字で切り抜きができません。一番上の例のようにバックグラウンドを設定した要素に直接文字を入れないといけないんですね。

 

注意点②対応ブラウザに注意！

画像を文字で切り抜く、かわいいし多用したいところなんですが対応ブラウザに注意です。

2021年6月12日現在の対応ブラウザを見ると、クローム、エッジ、ファイアフォックスくらいしか完璧にはサポートしてくれていません。

またクロームはプレフィックス「-webkit-background-clip」というふうに「-webkit」をつけてのサポートになるのも注意ですね。

対応ブラウザが増えたらもっと使っていきたいところ。

 

まとめ

cssで文字で画像を切り抜く方法をわかりやすく紹介しました。

background-clipというのを使うとすっごくラクチンに画像を文字で切り抜けるんですが対応ブラウザがまだちょっと心もとない感じ。でも可愛いテキストに仕上がってくれるんでこれから使いこなしていきたいところですよね。