Как реализовать CSS спрайт

[CabinetAdmin]

Можно на примере кнопок поделится, что расположены справа от названия темы, каждая кнопка это часть изображения:

и выводится посредством background-position и установкой точного размера изображения. Для первого изображения css можно составить следующим образом:

Код: Выделить всё

.icons a {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0 6px 6px 0;
	padding: 0;
	outline: none;
}
.icons a.facebook {
	background: url('/images/icons.png') 0px 0 no-repeat;
}

Первая часть кода создаёт общие настройки: размеры, отступы и тд, за исключением позиции изображения. Позицию первого изображения задаём в своём классе, где позиция выставлена по нулям. Второе изображение должно иметь отступ и так как все наши изображения равны 24px, то делаем отступ по горизонтали -24px:

Код: Выделить всё

.icons a.livejournal {
	background: url('/images/icons.png') -24px 0 no-repeat;
}

Следующее изображение будет иметь отступ уже в -48px и так далее.

Если склеенное изображение большое, то выставляем обе позиции background: url('/images.png') 20px 20px no-repeat;, изображение будет отображаться с отступом в 20px слева и сверху.

Как то так, если вкратце. Но принцип думаю должен быть понятен.