Что такое спрайты в CSS

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

Давайте рассмотрим их использование на примере верстки кнопки в двух состояниях: обычном и при наведении.

Итак, собственно image:

HTML:

<input class="rbc-btn" type="submit" value="Скачать!!!" />

CSS:

.rbc-btn {
    background: url(images/button.png) no-repeat;
    background-position: 0 -30px;
    height: 30px;
    width: 100px;
    border: none;
    font-size: 14px;
    font-family: Tahoma;
    color: #000000;
    outline: none;
}
.rbc-btn:hover {
    background-position: 0 0;
}

Вот, что должно у вас получиться, вот такая будет симпатичная кнопочка на HTML:

Скачать рабочий пример

* * *

CSS-спрайты используются практически везде. Например, их вы можете наблюдать во фреймворке Twitter Bootstrap, — все множество различных значков размера 16 на 16 пикселей там представлено одной большой картинкой.