CSS Image Sprites
Спрайты изображений
Спрайт изображений представляет собой набор изображений, помещенных в одно изображение.
Веб-страницы с большим количеством изображений может занять много времени для загрузки и генерирует несколько запросов сервера.
Использование спрайтов изображений уменьшит количество запросов сервера и сохранит пропускную способность.
Спрайты изображений-простой пример
Вместо того, чтобы использовать три отдельных изображения, мы используем это одиночное изображение ("img_navsprites.gif"):
С помощью CSS мы можем показать только ту часть изображения, которая нам нужна.
В следующем примере CSS указывает, какая часть изображения "img_navsprites.gif", чтобы показать:
Пример
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Пример объяснил:
<img id="home" src="img_trans.gif">- Только определяет небольшое прозрачное изображение, так как атрибут src не может быть пустым. Отображаемое изображение будет фоновым изображением, которое мы указываем в CSSwidth: 46px; height: 44px;- Определяет часть изображения, которое мы хотим использоватьbackground: url(img_navsprites.gif) 0 0;- Определяет фоновое изображение и его положение (левый 0px, верхний 0px)
Это самый простой способ использования изображений спрайтов, теперь мы хотим, чтобы развернуть его с помощью ссылок и наведении эффектов.
Спрайты изображений-создание списка переходов
Мы хотим использовать изображение спрайта ("img_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;} - Высота всех изображений 44пкс
Теперь начните позиционировать и стиль для каждой конкретной части:
- #home {left:0px;width:46px;} - Расположен на всем пути влево, и ширина изображения 46пкс
- #home {background:url(img_navsprites.gif) 0 0;} - Определяет фоновое изображение и его положение (левый 0px, верхний 0px)
- #prev {left:63px;width:43px;} - Позиционируется 63пкс вправо (#home ширину 46пкс + некоторое дополнительное пространство между элементами), а ширина 43пкс.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Определяет фоновое изображение, 47пкс вправо (#home ширина 46пкс + 1px разделитель линии)
- #next {left:129px;width:43px;}- Позиционируется 129пкс вправо (начало #prev 63пкс + #prev ширина 43пкс + дополнительное пространство), а ширина 43пкс.
- #next {background:url('img_navsprites.gif') -91px 0;} - Определяет фоновое изображение, 91пкс вправо (#home ширина 46пкс + 1px разделитель линии + #prev ширина 43пкс + 1px разделитель линий)
Спрайты изображений-эффект Hover
Теперь мы хотим добавить эффект Hover в наш список навигации.
Совет: Селектор :hover может использоваться для всех элементов, а не только для ссылок.
Наш новый образ ("img_navsprites_hover.gif") содержит три навигационных изображения и три изображения для использования при наведении эффектов:
Поскольку это одно изображение, а не шесть отдельных файлов, не будет задержка загрузки , когда пользователь наводит курсор на изображение.
Мы добавляем только три строки кода для добавления эффекта Hover:
Пример
#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;
}
Пример объяснил:
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Для всех трех наведите изображения мы указываем то же положение фона, только 45пкс дальше вниз