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