-webkit-background-clipを用い背景画像を文字で切り抜く

目的

-webkit-background-clip:textを用い背景画像を文字で切り抜く。
背景画像をアニメーション可能。

CSS

.blog-root-link {
font-size : 50px;
background : url(背景画像URL);
-webkit-background-clip : text;
-webkit-text-fill-color : transparent;
animation : move-background 10s infinite linear;
}

@keyframes move-background {
0% { background-position-x : 0; }
100% { background-position-x : -背景画像の幅; }
}
Chrome、Safariに限られる。