Реализация спрайтов изображений в CSS

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

Примечание: При использовании HTTP/2, использование нескольких небольших запросов может быть более эффективным с точки зрения пропускной способности.

Реализация

Предположим, что изображение задается для каждого элемента с классом tool-btn:

.tool-btn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}

Позицию фона можно добавить либо в виде двух значений x, y после <url> в фоне, либо как background-position. Например:

#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}

Это сдвинет начальную точку изображения фона для элемента с идентификатором btn1 на 20 пикселей влево, а для элемента с идентификатором btn2 на 40 пикселей влево (предполагая, что у них задан класс tool-btn и они затрагиваются правилом изображения выше).

Аналогично, вы также можете создать состояния наведения с помощью:

#btn:hover {
  background-position: <pixels shifted right>px <pixels shifted down>px;
}

См. также

Полная рабочая демонстрация на CSS Tricks

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Implementing_image_sprites_in_CSS