Как работают спрайты CSS?

Question

У меня есть 3 разных изображения, и я хочу создать спрайт с помощью CSS. Я понимаю, что уменьшит HTTP-запросы. Однако я совершенно новичок в этой концепции и понятия не имею, как к этому подойти.

Что будет лучшим выбором для меня? Также я видел, что есть несколько генераторов спрайтов CSS, куда вы отправляете .zip изображений, и он объединяет их.

Я пытался это сделать, но не понял, что происходит. Любые рекомендации относительно создания и использования спрайтов CSS будут высоко оценены.

Обновление: Я просмотрел статью «Часть списка», но она мне не очень понятна. Может кто-нибудь привести пример использования CSS-спрайта? [Краткий автономный пример в ответе предпочтительнее для SO, чем просто ссылка на пример в другом месте. & Ndash; изд]

.

Answer 1

Пример, который вам нужно изучить, следующий:

#nav li a {background-image:url('sprite.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

Sprite.gif - это большое изображение, содержащее все меньшие изображения в сетке (не обязательно). Затем вы используете позиционирование для отображения только той части спрайта, которая содержит ваше изображение.

Существуют онлайн-инструменты, которые с помощью набора изображений возвращают большое спрайтовое изображение с координатами, где искать меньшие изображения.

Answer 2

CSS-спрайты: что это такое, почему они классные и как их использовать

Answer 3

Допустим, у вас есть кнопка, которая меняет свое фоновое изображение при наведении. Мышь должна происходить мгновенно , чтобы дать хороший отзыв пользователю. Если вы просто переключаете изображение на кнопку, браузер может пойти на сервер, чтобы получить изображение, что испортит эффект. Используя CSS-спрайт, каждое изображение загружено и готово к немедленному нажатию кнопки.

Также некоторые браузеры «мерцают» при переключении изображений. CSS-спрайты избегают этой проблемы мерцания, которая иногда может случиться.

Answer 4

Посмотрите здесь спрайт Google , который они используют для iGoogle. Вы просто объединяете изображения в одно большое изображение. Таким образом, вы делаете один запрос. Затем вы используете расположение фона, высоту и ширину, чтобы выбрать, какую часть изображения вы хотите.

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

Answer 5

Все, что вы делаете, когда вы делаете спрайты, это то, что ваши маленькие изображения выкладываются на один файл изображения. Вы можете создать этот единственный файл изображения самостоятельно, если у вас есть хорошая программа для редактирования изображений. Затем вы можете использовать свойство css background-position , чтобы указать фрагмент изображения, который будет использоваться для этого спрайта.

Answer 6

У List Apart есть хорошая статья о них: CSS Sprites: Поцелуй Смерти среза изображений