CSS
CSS-спрайты

Синтаксис

• // Использование фонового положения
  background: url ("sprite-image.png");
  background-position: -20px 50px;
• // Сокращение свойств фона
  background: url ("sprite-image.png") -20px 50px;

замечания

Основная реализация

Что такое спрайт изображения?

Спрайт изображения - это единственный актив, расположенный на листе спрайта изображений. Лист спрайта изображений представляет собой файл изображения, содержащий более одного актива, который можно извлечь из него.

Например:

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

Итак, как вы его реализуете? Вот пример кода.

HTML

<div class="icon icon1"></div>
<div class="icon icon2"></div>
<div class="icon icon3"></div>

CSS

.icon {
    background: url(“icons-sprite.png”);
    display: inline-block;
    height: 20px;
    width: 20px;
}
.icon1 {
      background-position: 0px 0px;
}
.icon2 {
      background-position: -20px 0px;
}
.icon3 {
      background-position: -40px 0px;
}

Используя настройку ширины и высоты спрайта и используя свойство background-position в CSS (со значением x и y), вы можете легко извлечь спрайты из листа спрайтов с помощью CSS.