これを行うもう1つの簡単な方法は、 Sprite Cow というこのサイトを使用することです。私は最近それを試しました、そしてそれは物事がはるかに速く進むようにします。
このようなツール を使用して、スプライトのアイコンの背景位置を取得できます。
最初に画像をアップロードしてから、スプライトからアイコンを選択する必要があります。 CSSが生成されます。生成されたCSSをコピーして、クラスで使用するだけです。 （免責事項：私はいつかこれを作りました）
他のオプションは
Photoshopなどの画像エディタで画像を開く必要があります。そこから、画像のどこにでもXとYの位置を見つけることができます。左、上が0,0であることに注意してください。 xとyの位置を取得し、次のように使用します
背景位置：-310px -123px;
X座標とY座標の前の「-」記号に注意してください。
皮切りに
背景位置：1px 1px;
Firebugを使用して、その場で値を変更します。試行錯誤の方法で、正確な位置を見つけることができます。
スプライト画像のCSSコードを生成するための素晴らしいオンラインツールを1つ見つけました。
リンク： https://getspritexy.netlify.com/
それは画像ピクセルの生成に役立ちます。私にとって非常に便利です。