Спрайты изображений в CSS

Загрузка множества изображений замедляет веб-страницу и создаёт множество запросов к серверу.

Спрайт изображения решает эту проблему: различные маленькие изображения объединяются в один более крупный файл, «спрайт-изображение», обычно организованный подобно сетке.

Затем браузер загружает этот один файл вместо каждого изображения по отдельности, поэтому запросов к серверу меньше и расходуется меньше трафика.

Пример спрайтов изображений CSS

Для спрайтов изображений главную роль играют два свойства CSS:

background-image
background-position

В примере CSS выбирает, какая часть файла («img_navsprites.gif») показывается для каждого из элементов навигации (home, next и previous).

Пример спрайтов изображений

Объяснение примера:

width, height — размер каждой части изображения
background-image: url(img_navsprites.gif); — указывает на спрайт-изображение
background-position — смещает фоновое изображение внутри каждого элемента так, чтобы была видна только нужная часть спрайта
<img id="home" src="img_trans.gif"> — пустой атрибут src не допускается, поэтому каждое изображение начинается с маленького прозрачного файла; на самом деле вы видите фоновое изображение, заданное в CSS

Создайте HTML-страницу, демонстрирующую CSS-спрайты изображений.

Покажите, как использовать спрайт-изображение ("img_navsprites.gif") для отображения трёх иконок навигации (home, previous, next) с помощью CSS-свойств background-image и background-position.

Каждый элемент должен использовать прозрачное изображение в качестве src и отображать нужную часть спрайта через CSS:
- #home: width 46px, height 44px, background-position 0 0
- #prev: width 43px, height 44px, background-position -47px 0
- #next: width 43px, height 44px, background-position -91px 0

> Output: полная HTML-страница

Prompt

Создайте HTML-страницу, демонстрирующую CSS-спрайты изображений. Покажите, как использовать спрайт-изображение ("img_navsprites.gif") для отображения трёх иконок навигации (home, previous, next) с помощью CSS-свойств background-image и background-position. Каждый элемент должен использовать прозрачное изображение в качестве src и отображать нужную часть спрайта через CSS:

#home: width 46px, height 44px, background-position 0 0
#prev: width 43px, height 44px, background-position -47px 0
#next: width 43px, height 44px, background-position -91px 0

Output: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Image Sprites Example</title>
<style>
#home {
  width: 46px;
  height: 44px;
  background-image: url('img_navsprites.gif');
  background-position: 0 0;
}

#prev {
  width: 43px;
  height: 44px;
  background-image: url('img_navsprites.gif');
  background-position: -47px 0;
}

#next {
  width: 43px;
  height: 44px;
  background-image: url('img_navsprites.gif');
  background-position: -91px 0;
}
</style>
</head>
<body>

<h2>Image Sprites</h2>

<p>An image sprite is a collection of images put into a single image.</p>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="prev" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

Спрайты изображений в списке навигации

Спрайт-изображение («img_navsprites.gif») может также использоваться в списке навигации, разметка которого строится как список HTML (<ul> и <li>).

Список навигации со спрайтами

Объяснение примера:

#navlist {position:relative;} — относительное позиционирование здесь делает возможным абсолютное позиционирование внутри
#navlist li — нулевые margin и padding, без маркеров списка и абсолютное позиционирование для каждого <li>
#navlist li, #navlist a — отображение block и высота 44px для всех изображений

Затем каждый элемент навигации получает свою позицию и стиль:

#home {left:0px;width:46px;} — расположен полностью слева, ширина изображения 46px
#home {background:url(img_navsprites.gif) 0 0;} — задаёт фоновое изображение вместе с его положением (слева 0px, сверху 0px)
#prev {left:60px;} — расположен в 60px от левого края (ширина #home 46px + небольшой дополнительный промежуток между элементами)
#prev {background:url('img_navsprites.gif') -47px 0;} — берёт фоновое изображение со смещением на 47px вправо (ширина #home 46px + разделительная линия 1px)
#next {left:120px;} — расположен в 120px от левого края (начало #prev 60px + ширина #prev 43px + дополнительный промежуток)
#next {background:url('img_navsprites.gif') -91px 0;} — берёт фоновое изображение со смещением на 91px вправо (ширина #home 46px + разделительная линия 1px + ширина #prev 43px + разделительная линия 1px)

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

Используйте изображение-спрайт ("img_navsprites.gif") внутри неупорядоченного HTML-списка (ul и li) для создания горизонтальной панели навигации. Каждый элемент списка должен быть абсолютно позиционирован и отображать разную часть спрайта в качестве фона.

Список навигации (#navlist) должен использовать относительное позиционирование. Каждый li должен быть абсолютно позиционирован, без отступов, полей и маркеров. Ссылки и элементы списка должны иметь высоту 44px и отображаться как блочные элементы.

Расположите каждый элемент:
- #home: left 0px, ширина 46px, позиция фона 0 0
- #prev: left 60px, ширина 43px, позиция фона -47px 0
- #next: left 120px, ширина 43px, позиция фона -91px 0

> Результат: полная HTML-страница
"}, {

Prompt

Создайте HTML-страницу, демонстрирующую использование CSS-спрайтов изображений в списке навигации. Используйте изображение-спрайт ("img_navsprites.gif") внутри неупорядоченного HTML-списка (ul и li) для создания горизонтальной панели навигации. Каждый элемент списка должен быть абсолютно позиционирован и отображать разную часть спрайта в качестве фона. Список навигации (#navlist) должен использовать относительное позиционирование. Каждый li должен быть абсолютно позиционирован, без отступов, полей и маркеров. Ссылки и элементы списка должны иметь высоту 44px и отображаться как блочные элементы. Расположите каждый элемент:

#home: left 0px, ширина 46px, позиция фона 0 0
#prev: left 60px, ширина 43px, позиция фона -47px 0
#next: left 120px, ширина 43px, позиция фона -91px 0

Результат: полная HTML-страница "}, {

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Sprites - Navigation List</title>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 60px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 120px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>

<h2>Image Sprites - Navigation List</h2>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Спрайты изображений — эффект наведения

Далее список навигации получает эффект наведения.

Новое изображение («img_navsprites_hover.gif») содержит три изображения навигации и ещё три для наведения.

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

Для этого эффекта нужно всего три строки кода.

Эффект наведения со спрайтами

Объяснение примера:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} — каждое из трёх изображений наведения использует свою обычную позицию фона, только на 45px ниже.

Создайте HTML-страницу, демонстрирующую CSS-спрайты изображений с эффектом наведения.

Возьмите за основу пример со списком навигации, используя спрайт-изображение ("img_navsprites_hover.gif"), которое содержит три изображения навигации и три изображения эффекта наведения, расположенные вертикально. Изображения для наведения находятся на 45px ниже обычных изображений в спрайте.

Создайте список навигации со ссылками home, previous и next. Добавьте эффекты наведения, которые смещают позицию фона на 45px вниз при наведении:
- #home a:hover: позиция фона 0 -45px
- #prev a:hover: позиция фона -47px -45px
- #next a:hover: позиция фона -91px -45px

> Output: полная HTML-страница

Prompt

Создайте HTML-страницу, демонстрирующую CSS-спрайты изображений с эффектом наведения. Возьмите за основу пример со списком навигации, используя спрайт-изображение ("img_navsprites_hover.gif"), которое содержит три изображения навигации и три изображения эффекта наведения, расположенные вертикально. Изображения для наведения находятся на 45px ниже обычных изображений в спрайте. Создайте список навигации со ссылками home, previous и next. Добавьте эффекты наведения, которые смещают позицию фона на 45px вниз при наведении:

#home a:hover: позиция фона 0 -45px
#prev a:hover: позиция фона -47px -45px
#next a:hover: позиция фона -91px -45px

Output: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Sprites - Hover Effect</title>
<style>
#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites_hover.gif') 0 0;
}

#prev {
  left: 60px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 120px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>

<h2>Image Sprites - Hover Effect</h2>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>