実験室

サンプル

（参考サイトのfallbackと同じ）

画像サイズは200px × 50px
背景画像サイズは141px × 37px

なお、前景画像のかわりに-webkit-background-clip: textと-webkit-text-fill-color: transparentを使うと文字＋背景画像ができる。

文字シャドウと背景画像の色相が一致しないと色が奇麗に出ない。透過画像ではなく背景色を非透過色で埋めた画像なら問題なく表示されると思われる。

コード

<div id="player2" class="player">
	<img src="front.png">
</div>
<div id="player2" class="player">
	<div><p>Hello, World!</p></div>
</div>

<style>
.player{
	background-color:#ace;
}
@-webkit-keyframes b1 {
	0% { background-color: rgba(0, 0, 0, 0); background-position: 0px 90%; }
	100% { background-color: rgba(0, 0, 0, 0); background-position: 141px 90%; }
}
@-moz-keyframes b1 {
	0% { background-color: rgba(0, 0, 0, 0); background-position: 0px 90%; }
	100% { background-color: rgba(0, 0, 0, 0); background-position: 141px 90%; }
}
@-ms-keyframes b1 {
	0% { background-color: rgba(0, 0, 0, 0); background-position: 0px 90%; }
	100% { background-color: rgba(0, 0, 0, 0); background-position: 141px 90%; }
}
@-o-keyframes b1 {
	0% { background-color: rgba(0, 0, 0, 0); background-position: 0px 90%; }
	100% { background-color: rgba(0, 0, 0, 0); background-position: 141px 90%; }
}
@keyframes b1 {
	0% { background-color: rgba(0, 0, 0, 0); background-position: 0px 90%; }
	100% { background-color: rgba(0, 0, 0, 0); background-position: 141px 90%; }
}
#player img {
	-webkit-animation: b1 2s linear 0s infinite;
	   -moz-animation: b1 2s linear 0s infinite;
	    -ms-animation: b1 2s linear 0s infinite;
	     -o-animation: b1 2s linear 0s infinite;
	        animation: b1 2s linear 0s infinite;
	background: #ace url(back.png) 0 70% repeat-x;
}
#player2 div {
	background-color: #000;
}
#player2 p {
	-webkit-animation: b1 2s linear 0s infinite;
	   -moz-animation: b1 2s linear 0s infinite;
	    -ms-animation: b1 2s linear 0s infinite;
	     -o-animation: b1 2s linear 0s infinite;
	        animation: b1 2s linear 0s infinite;
	background: #ace url(back.png) 0 70% repeat-x;
	-webkit-background-clip: text;
	   -moz-background-clip: text;
	    -ms-background-clip: text;
	     -o-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
	   -moz-text-fill-color: transparent;
	    -ms-text-fill-color: transparent;
	     -o-text-fill-color: transparent;
	        text-fill-color: transparent;
	font-size: 36px;
	color: #fff;
	text-shadow: 0 0 rgba(255, 255, 255, 0.6);
	line-height: 1.4;
	font-weight: bold;
}
#player3 div {
	background-color: #000;
}
#player3 p {
	-webkit-animation: b1 2s linear 0s infinite;
	   -moz-animation: b1 2s linear 0s infinite;
	    -ms-animation: b1 2s linear 0s infinite;
	     -o-animation: b1 2s linear 0s infinite;
	        animation: b1 2s linear 0s infinite;
	background: #ace url(back.png) 0 70% repeat-x;
	-webkit-background-clip: text;
	   -moz-background-clip: text;
	    -ms-background-clip: text;
	     -o-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
	   -moz-text-fill-color: transparent;
	    -ms-text-fill-color: transparent;
	     -o-text-fill-color: transparent;
	        text-fill-color: transparent;
	font-size: 36px;
	color: rgba(170, 204, 238, 0);
	text-shadow: 0 0 rgba(170, 204, 238, 0.6);
	line-height: 1.4;
	font-weight: bold;
}
</style>

使用画像