Как создать и использовать CSS спрайт? @Frontend Interview

Frontend Interview - собеседования по Javascript / Html / Css | United States America (US)

Create: 2025-06-30 Update: 2025-07-22 06:38:59

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

CSS-спрайт – это метод объединения нескольких изображений в один файл для оптимизации загрузки и отображения на веб-странице.

Зачем нужны спрайты?
Уменьшают количество HTTP-запросов → вместо 10 изображений браузер загружает 1 файл
Ускоряют загрузку сайта → меньше сетевой нагрузки
Кэшируются в браузере → реже загружаются заново

Создание CSS-спрайта
Допустим, у нас есть 3 иконки:
icon-home.png
icon-user.png
icon-settings.png
Мы объединяем их в один файл (sprite.png):

Использование спрайта с CSS
Теперь нам нужно показать нужную часть изображения с помощью background-position.

.sprite {
  background: url("sprite.png") no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
}

/* Позиции каждой иконки */
.icon-home { background-position: 0 0; }  /* Первая иконка */
.icon-user { background-position: -32px 0; }  /* Вторая иконка */
.icon-settings { background-position: -64px 0; }  /* Третья иконка */

👉 @frontendInterview

Frontend Interview - собеседования по Javascript / Html / Css

.sprite {
  background: url("sprite.png") no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
}

/* Позиции каждой иконки */
.icon-home { background-position: 0 0; }  /* Первая иконка */
.icon-user { background-position: -32px 0; }  /* Вторая иконка */
.icon-settings { background-position: -64px 0; }  /* Третья иконка */

👉 @frontendInterview

👍3

hottg.com/frontendInterview/4726

1.39K viewsJun 30 at 09:02

>>Click here to continue<<

Frontend Interview - собеседования по Javascript / Html / Css