Есть ли способ найти точное местоположение спрайтов css?

У меня есть изображение с множеством значков, и я хочу узнать точное местоположение изображения каждого значка, используя спрайты CSS и CSS, который следует использовать, есть ли инструмент, который я могу использовать для этого для меня, или подскажите места?


css css-sprites
person pingpong    schedule 03.04.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Генераторы спрайтов:
 — http://css-sprit.es/
– http://csssprites.com/
– http://spritegen.website-performance.org/
- http://spriteme.org/
- http://collamo.jp/Tonttu
– https://github.com/aberant/spittle
- https://github.com/shwoodard/active_assets
- http://duris.ru/

Хорошие руководства:
 – http://net.tutsplus.com/articles/news/exactly-how-to-use-css-sprites/ - http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
- http://css-tricks.com/css-sprites/
 – http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites
- http://www.alistapart.com/articles/sprites
- http://www.websiteoptimization.com/speed/tweak/css-sprites/

Преимущества использования спрайтов CSS:
- Каковы преимущества использования спрайтов CSS в веб-приложениях?
- Когда лучше использовать спрайты CSS, а когда нет?

Недостатки использования спрайтов
 – требует времени.
 – Когда лучше использовать спрайты CSS, а когда нет?

person Shaz    schedule 03.04.2011

arrow_upward
2
arrow_downward

Такой инструмент: http://spritegen.website-performance.org/ создаст спрайт для вы и сгенерировать CSS, чтобы пойти с ним. Он не найдет координаты в существующих спрайтах (как это можно сделать точно?!), но поможет настроить его в первую очередь.

person Rich Bradshaw    schedule 03.04.2011

arrow_upward
1
arrow_downward

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

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

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

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

    фоновая позиция: -310px -123px;

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

  1. Начните с

    фоновая позиция: 1px 1px;

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

person kiranvj    schedule 08.02.2013