Как использовать SPRITE?

Question

Как использовать SPRITE?

Рейтинг: 0Ответов: 1Опубликовано: 29.01.2015

Я новичок в общения с sprite. Есть sprite в формате png (width: 100px; height: 133px), в нем расположены три рисунка. Как мне задействовать один из них, но чтоб остальных двух рисунков не было видно?

css html спрайт

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Это можно осуществить вот по такому принципу:

HTML:

<div class="sprite"></div>

CSS:

 .sprite {
    background: url('адрес_Вашей_картинки') no-repeat область спрайта(Например: -11px -51px); 
    width: ширина;
    height: высота;
    }

Есть такой сервис, называется он spritecow, он автоматически выдает координаты спрайта, Вам только необходимо загрузить картинку и выделить область. Ссылка

Как использовать SPRITE?

Ответы