Как указать определенный значок в наборе значков?

Question

Это не первый раз, когда я видел этот вид изображения:

Кажется, что каждый значок указывает на программно с помощью CSS (???). Это называется набор иконок? При просмотре веб-сайта я могу видеть эти значки индивидуально, но когда я пытаюсь их сохранить, они отображаются в виде файла с кодировкой base64, и все отдельные изображения находятся вместе в одном файле png. Я имею в виду, как это работает? Есть ли способ разделить их? Как они используются на веб-сайте?

Спасибо!

Answer 1

Это известно как "CSS Image Sprite".

Связи с деталями:

• http://css-tricks.com/css-sprites/
• http://www.w3schools.com/css/css_image_sprites.asp

Это очень распространенный способ в веб-разработке. Во многом, потому что это помогает ограничить HTTP-запросы. Изображение загружается в кэш пользователей только один раз, а затем перемещается, чтобы отображать только те части, которые необходимы. Это намного эффективнее, чем загрузка нескольких изображений.

Answer 2

Эти изображения называются спрайты

http://www.w3schools.com/css/css_image_sprites.asp

Этот сайт свободно для создания спрайтов

http://csssprites.com/

Answer 3

Те спрайтов и работать таким образом: вы загрузите изображение на сервер и затем примените их к элементу с этим кодом, например ..

HTML

<div id="icon"></div> 

CSS

.icon{ 
    width: 20px; 
    height: 20px; 
    background: url(yourimage.png) 0 0; 
} 

.icon:hover{ 
    background: url(yourimage.png) 20 0; 
} 

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

Вы можете узнать больше на сайте: http://www.w3schools.com/css/css_image_sprites.asp