как сделать спрайт

Question

Я использовал онлайн-сервис srpite http://spritegen.website -performance.org / , но я хочу знать, как сделать их самостоятельно.

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

Answer 1

С самого сайта, на который вы ссылаетесь :

CSS-спрайты - это способ уменьшить количество HTTP-запросов на ресурсы изображений, на которые ссылается ваш сайт.Изображения объединяются в одно большее изображение с определенными координатами X и Y.Присвоив это сгенерированное изображение соответствующим элементам страницы, свойство CSS background-position можно затем использовать для смещения видимой области к требуемому изображению компонента.

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

Answer 2

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

Взгляните на значок спрайта Yahoo . Обратите внимание, что у них все значки секций расположены вертикально на одном большом изображении. Затем они используют CSS для позиционирования фона, чтобы показать только небольшое окно изображения спрайта, что дает вам только значок.

В конце концов, вам решать, как вы расположите свой спрайт. Проверьте дно спрайта Амазонки .

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