以前、Photoshopでクリッピングマスクを使い、文字で画像を切り抜く加工を行いましたが、css3の「background-clip」と「text-fill-color」を使う事で同じような表現が出来るようになります。
background-clip
background-clipプロパティは、背景の適用範囲を指定する際に使用します。テキスト部分に背景画像を適応させたい場合、
-webkit-background-clip: text;
と指定します。
※注意 2019月3月現在、-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;
}
