как найти положение пикселя изображения из спрайта

Question

Я хочу знать, как найти положение изображения (координаты) при использовании спрайтового изображения для стилизации.

Answer 1

Другой, более простой способ сделать это через этот сайт под названием Sprite Cow . Я только что попробовал это недавно, и это заставляет дела идти намного быстрее.

Answer 2

Вы можете использовать инструмент, подобный этому , и получить фоновые позиции значков в спрайте.

Вам необходимо сначала загрузить свое изображение, затем выбрать значок из спрайта. Будет сгенерирован CSS, просто скопируйте сгенерированный CSS и используйте его в своем классе. (Отказ от ответственности: я сделал это когда-то назад)

Другие опции:

1. Вам необходимо открыть изображение в графическом редакторе, таком как Photoshop. Оттуда вы можете найти положение X и Y в любом месте изображения. Обратите внимание, что слева вверху 0,0. Возьмите x и y позицию и используйте вот так

   background-position: -310px -123px;

Обратите внимание на знак "-" перед координатами X и Y.

2. Начните с

   background-position: 1px 1px;

Используйте Firebug для изменения значений на лету. Методом проб и ошибок вы можете найти точное положение.

Answer 3

Я нашел один удивительный онлайн-инструмент для создания CSS-кода изображения Sprite.

Ссылка: http://GetSpriteXY.com/

Это поможет вам в генерации пикселей изображения. Очень полезно для меня.

Answer 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>

Answer 5

Используйте графическую программу редактирования, такую ​​как Gimp / Photoshop, и записывайте координаты / положение вниз, когда вы пишете CSS.