CSS3:フォントで画像をマスクする

goto_jp 117views 更新:2017年5月31日

CSSでフォントをマスク化する方法です。
マスクされてることが分かりやすいようhoverアニメーションも付けてます。

See the Pen CSS3 Text Mask by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

CSS

マスクに関わる箇所は以下の部分です。

h1 {
  〜
  color: transparent;
  background: url("{画像}") center center;
  background-clip: text;
  -webkit-background-clip: text;
  〜
}

background-clip: text;

このプロパティで背景の適用範囲を決めます。今回は text を指定することで、テキストの範囲のみに背景を適用するという形になっています。

しかしテキスト自体には色がついているため、 color: transparent で透明にすることで背景画像だけがマスクされて見えるという仕組みです。

現状 background-clip: text はChrome用のベンダープレフィックスが必要なようです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません