WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

background-clipとtext-fill-colorを使ってcssを使って文字で画像を切り抜く

以前、Photoshopクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。

background-clip

background-clipプロパティは、背景の適用範囲を指定する際に使用します。テキスト部分に背景画像を適応させたい場合、

-webkit-background-clip: text;

と指定します。
※注意 2017月12月現在、-webkit-のベンダープレフィックスが記述が必要です。



さらに

-webkit-text-fill-color: transparent;

「text-fill-color」を transparentに指定する事で文字色を透過にする事が出来ます。transparentの代わりに「color: rgba(0,0,0,0);」でもOKです。

h1 {
  background:url(img/bg.jpg) no-repeat center 75%/cover;
  width:100%;
  height:70vh;
  text-align:center;
  font-size:200px;
  line-height:70vh;
  position:absolute;
  top:0;
  left:0;
  -webkit-background-clip:text;/*テキストの形でクリッピングする*/
  -webkit-text-fill-color:transparent;/*テキストの塗りを透明に*/
  white-space:nowrap;
  text-indent:1em;
  animation:txt-anime 20s 0.5s linear infinite;
}

codepen.io


creativity-class.xyz