CSSのみでできる!テキストをマスクして背景画像を設定しよう!

CSSのみでできる!テキストをマスクして背景画像を設定しよう!

こんにちは、ちゃんけいです!

本日が私の好きなCSSの紹介です!テンション上がりますね!

テキストに背景画像が設定されているのを見たことはありませんか??

テキストにマスクをかけて、テキストの範囲だけ背景画像を表示する。そんな仕組みなのですが、実はCSSだけで簡単にできます。

それでは行ってみましょう!

やり方は2種類

私の知る限りやりかたは2種類あります。

どちらも、バックグラウンドに画像を指定する点と、テキストを透明にする点は共通します。

  • text-fill-colorを使う方法
  • 要素の背景描画領域を変更する方法

以上の2つがありますが、text-fill-colorを使う方法は、IE11やEdgeに対応していないため2つめの方法を紹介します。

background-clipをつかっていくよー!

こちらのプロパティは、文字をマスクに使うことができます!

IE11より古いバージョンには少し対応が難しい点がでてくるのでハックを使って代替画像などを用意しましょう。

今回使うHTMLはたったのこれだけです。驚きの少なさ。

See the Pen text background-clip by Chankei (@Chankei) on CodePen.0

そしてCSSですが、今回重要なのはこの2点です。

  • color: transparent;
  • background-clip: text;

colorの指定で、文字の色を透明に。

background-clipで透明にした文字の範囲にのみ背景を表示されるように。

これができるだけで完成です。とっても簡単ですね。

See the Pen text background-clip by Chankei (@Chankei) on CodePen.0

少しアイデアを加えると、keyframesアニメーションを使うことでこんな感じに動き加えるだけでなんだか自分できる感が増します。

See the Pen text background-clip animation by Chankei (@Chankei) on CodePen.0

まとめ

いかがでしたでしょうか?

クオリティの高い画像や、かなり重めのweightを持っているフォントと相性がいいので少しリッチなサイトにマッチするのかな?と思います。

ぜひコピペで使ってみてください。

 

それでは今回はこの辺で、ちゃんけいでした。