CSSスプライトの正しいオフセットを見つけるにはどうすればよいですか？

Question

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

Answer 1

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

Answer 2

スプライトを作成し、CSSをあなたのために配置するWebツールがあります。 http://css-sprit.es/がその例です。

Answer 3

オンラインでCSS Sprite Generatorを調べる価値はありますが、このアプローチの退屈さを取り除く必要があります。

Answer 4

覚えておくべき重要なことは、オフセットが負のになることです。あなたは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 5

PNGファイルの空き領域が非常に少数のバイトを占めているので、ちょうど置くすべての「イメージは」定期的な間隔で、すべての言います50または100ピクセル。そうすれば、最初の適切な値を見つけてそこから50/100ピクセルを取り除くことができます（vimの50 ctrl-x）。

Answer 6

tool like thisを使用して、スプライト内のアイコンの背景位置を取得できます。

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