23

スプライト画像をスタイリングに使用する際に、画像の位置(座標)を求める方法を知りたいです。

4

5 に答える 5

58

これを行うもう 1 つの簡単な方法は、Sprite Cowというサイトを使用することです。最近試してみたところ、物事がずっと速く進みます。

于 2012-05-23T15:40:48.157 に答える
5

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

最初に画像をアップロードしてから、スプライトからアイコンを選択する必要があります。CSS が生成されます。生成された CSS をコピーして、クラスで使用するだけです。（免責事項：これはいつか戻ってきました）

ここに画像の説明を入力

ここに画像の説明を入力

他のオプションは

  1. Photoshop などの画像エディタで画像を開く必要があります。そこから、画像のどこにでも X と Y の位置を見つけることができます。左、上が 0,0 であることに注意してください。x と y の位置を取得し、このように使用します

    背景位置: -310px -123px;

X 座標と Y 座標の前の「-」記号に注意してください。

  1. 皮切りに

    背景位置: 1px 1px;

その場で値を変更するには、Firebug を使用します。試行錯誤の方法で、正確な位置を見つけることができます。

于 2013-01-24T02:42:15.583 に答える
2

スプライト画像の CSS コードを生成する素晴らしいオンライン ツールを 1 つ見つけました。

リンク：https ://getspritexy.netlify.com/

画像ピクセルの生成に役立ちます。私にとって非常に便利です。

于 2016-04-06T04:40:52.603 に答える
-2

Gimp/Photoshop などのグラフィック編集プログラムを使用して、CSS を記述しながら座標/位置を書き留めます。

于 2009-09-21T05:04:11.927 に答える
-4

この例を試してみると、スプライトを初めて試したときに大いに役立ちました。

<style type="text/css">
#avocado{
width: 104px;
height: 95px;
background: url(http://2.bp.blogspot.com/-gwRqiyz9X8k/VM0vhBscDsI/AAAAAAAACVA/hITMUs6BjOg/s1600/foods-that-are-toxic-to-dogs.jpg) -110px -121px;
}
</style>

于 2015-01-31T19:49:24.077 に答える