css - CSSスプライトの適切なオフセットを見つける方法は?

Question

ページの要素の背景としてスプライト画像を設定していますが、画面上で実際に表示できるように適切なオフセットを見つけるにはどうすればよいですか?

Answer 1

グラフィックス プログラムでスプライト イメージを作成するときは、各要素のオフセットを書き留めて、CSS で使用する必要があります。

Answer 2

このようなツールを使用して、スプライト内のアイコンの背景位置を取得できます。

最初に画像をアップロードしてから、スプライトからアイコンを選択する必要があります。CSSが生成されます。生成されたCSSをコピーして、クラスで使用してください。

このようなCSSスタイルが生成されます。CSSクラスに含める必要があります

background-position: -213px -135px; 
width: 97px;
height: 65px;

Answer 3

覚えておくべき主なことは、オフセットが負になるということです。100x100 のスプライトを含む 100x500 の画像がある場合、オフセットは次のようになります。

.img1 { background-position: 0 0; }
.img2 { background-position: 0 -100px; }
.img3 { background-position: 0 -200px; }
.img4 { background-position: 0 -300px; }
.img5 { background-position: 0 -400px; }

Answer 4

png ファイルの空の領域は非常に数バイトしか占有しないため、すべての「画像」を一定の間隔 (たとえば 50 または 100 ピクセルごと) で配置します。そうすれば、最初の適切な値を簡単に見つけて、そこから 50/100 ピクセルを削除できます ( 50 ctrl-xvim で)。