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です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>background-clipで文字をクリッピング</title>
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
<style>
p{
border: 1px solid #333;
width: 600px;
height: 400px;
margin: 50px auto 0;
padding: 0;
background: url(img/bg.jpg)no-repeat center center/cover;
font-size: 180px;
text-indent: 40px;
padding-top: 60px;
box-sizing: border-box;
font-weight: bold;
font-family: 'Abril Fatface', cursive;
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
overflow: hidden;
animation: txt 5s linear infinite;
}
@keyframes txt{
0%{text-indent: 40px;}
100%{text-indent: -530px;}
}
p>span{
margin-left: 80px;
}
</style>
</head>
<body>
<p>Felica<span>Felica</span></p>
</body>
</html>