Изображение спрайта CSS

Спрайт изображения

Спрайт изображения - это набор изображений, включенных в одно изображение.

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

Использование спрайтов изображений уменьшает количество запросов к серверу и экономит полосу пропускания.

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

Мы используем одно изображение ("navsprites.gif") вместо трех отдельных изображений:

Навигационное изображение

Используя CSS, мы можем отображать только часть необходимого изображения.

В следующем примере CSS указывает, какая часть изображения "navsprites.gif" будет отображаться:

Пример

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

Попробуйте сами

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

  • <img id="home" src="trans.gif"> - Определите только маленькое прозрачное изображение, так как атрибут src не может быть пустым. Actualное изображение будет тем, которое мы указали в CSS.
  • width: 46px; height: 44px; - Определите часть изображения, которую мы хотим использовать
  • background: url(navsprites.gif) 0 0; - Определите фоновое изображение и его положение (left 0px, top 0px)

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

Мы хотим использовать спрайты изображений ("navsprites.gif") для создания навигационного списка.

Мы будем использовать HTML-список, так как он может быть ссылкой и поддерживает фоновые изображения:

Пример

#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: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Попробуйте сами

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

  • #navlist {position:relative;} - Установлена относительная позиция, чтобы разрешить абсолютное позиционирование внутри
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - Положение и отступы установлены в 0, удален list-style, и все элементы списка являются абсолютными
  • #navlist li, #navlist a {height:44px;display:block;} - Высота всех изображений составляет 44px

Теперь начинаем устанавливать позиционирование и стили для каждого конкретного участка:

  • #home {left:0px;width:46px;} - Постоянное позиционирование влево, ширина изображения 46px
  • #home {background:url(navsprites.gif) 0 0;} - Определяет положение и размер фонового изображения (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - Позиционирование вправо на 63px (#home ширина 46px + дополнительное пространство между элементами), ширина 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - Определяет положение фонового изображения вправо на 47px (#home ширина 46px + 1px разделитель)
  • #next {left:129px;width:43px;} - Позиционирование вправо на 129px (#prev начальная позиция 63px + ширина #prev 43px + избыточное пространство), ширина 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - Определяет положение фонового изображения вправо на 91px (#home ширина 46px + 1px разделитель + #prev ширина 43px + 1px разделитель)

Изображение спрайт - эффект наведения

Теперь мы добавим эффект наведения в список навигации.

Совет::hover селектор доступен для всех элементов, а не только для ссылок.

Наша новая картинка ("navsprites_hover.gif") содержит три навигационных изображения и три изображения для эффекта наведения:

Навигационное изображение

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

Чтобы реализовать эффект наведения, мы добавляем всего три строки кода:

Пример

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

Попробуйте сами

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

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