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

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

Ответ 1

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

Ответ 2

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

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

Другие варианты

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

положение фона: -310px -123px;

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

Начать с

background-position: 1px 1px;

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

Ответ 3

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

Ссылка: https://getspritexy.netlify.com/

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

Ответ 4

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

Ответ 5

Попробуйте этот пример, это помогло мне, когда я попробовал материал спрайт в первый раз.

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