Есть ли способ для меня, чтобы найти точное местоположение спрайтов CSS? - PullRequest
Новая
       15

Есть ли способ для меня, чтобы найти точное местоположение спрайтов CSS?

1 голос
/ 03 апреля 2011

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

Ответы [ 3 ]

3 голосов
/ 03 апреля 2011

Генераторы спрайтов:
- 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...
- 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 Sprites:
- В чем преимущества использования CSS Sprites в веб-приложениях?
- Когда CSS-спрайты было бы хорошо использовать, а когда нет?

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

2 голосов
/ 03 апреля 2011

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

1 голос
/ 08 февраля 2013

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

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

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

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

    background-position: -310px -123px;

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

  1. Начните с

    background-position: 1px 1px;

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

...