css - CSS Background-Position 座標を理解する方法

Question

css background-image として使用するスプライトを作成するたびに、計算を処理して、X 座標と Y 座標をピクセル単位で覚える方法を思い出す必要があります。どうすればそれを覚えたり、視覚的に見たりして、まっすぐに保つことができますか?

Answer 1

この図を思いついたので、他の人にも役立つことを願っています。

Answer 2

私は通常、スプライト シートの任意の場所に画像を保持し、Fireworks の各グラフィック要素をクリックして (私は花火を使用します)、座標を無効にして座標をチェックします。たとえば、要素が x=23px と y=20px にある場合、CSS ではbackground-position:-23px -20px. これは常に機能します。