Как найти правильные смещения для CSS-спрайтов?

Question

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

Answer 1

При создании изображения спрайта в графической программе вы должны записать смещения для каждого элемента и использовать их в своем CSS.

Answer 2

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

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

Он будет генерировать такие стили CSS, вам нужно включить их в свой класс CSS

background-position: -213px -135px; 
width: 97px;
height: 65px;

Answer 3

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

Answer 4

Существуют веб-инструменты, которые создадут спрайт и предоставят вам CSS с позициями для вас. http://css -sprit.es / является примером.

Answer 5

Поскольку пустые области файла png занимают очень мало байтов, просто помещайте все «изображения» через регулярные промежутки времени, скажем, каждые 50 или 100 пикселей. Таким образом, вы можете просто найти первое правильное значение и удалить 50/100 пикселей из этого ( 50 ctrl-x в vim).

Answer 6

Главное помнить, что смещения будут отрицательными . Если у вас есть изображение 100x500 со 100x100 спрайтами, то смещения будут:

.img1 { background-position: 0 0; }
.img2 { background-position: 0 -100px; }
.img3 { background-position: 0 -200px; }
.img4 { background-position: 0 -300px; }
.img5 { background-position: 0 -400px; }