jqmobileでスプライトはどのように機能しますか？

Question

私はCSSのスプライトの仕組みについて合理的な理解があると思いますが、JQ Mobileがどのようにそれをやっているのか、私は困惑しています。サンプルとして私は本当に基本的なバージョンをまとめました：

<style> 
#id { 
display: block-inline; 
width: 16px; 
height: 16px; 
background-image: url("http://code.jquery.com/mobile/1.0b1/images/icons-18-white.png"); 
background-position: -576px 50%; 
background-color: rgba(0,0,0,0.4); 
} 
</style> 
<div style="border: 1 solid black; padding: 5px"> 
<span id="id">&nbsp;&nbsp;&nbsp;&nbsp;</span> 
</div> 

これは、jqmがそれをやっている方法を取り除いたものです。私が得られないことは、画像エディタにそのpngファイルをロードすると、それは完全に白であり、そこにはどの画像も見ることができないということです。バックグラウンドポジションが50％である理由についても、私は完全に混乱しています。

誰でも分かりますか？

Answer 1

あなたが話しているスプライトには、透明な背景に多くの白いアイコンがあります。あなたはIrfanViewはのような軽量な無料のツールを使用する場合は、このようにそれを参照してくださいね。 background-position: -576px 50%;は背景が、私はhomeアイコンがあるところだと思いますこれは、左から-576の位置に配置され、上から50％されるだろう意味します。おそらく50%ビットはこの場合重要ではありませんが、高さは16ピクセルに設定されていますが、他の奇妙なモバイルブラウザにとってはおそらく重要です。