Спрайты изображений CSS
Спрайты изображения
Спрайт изображения — это набор изображений, объединенных в одно изображение.
Веб-страница с большим количеством изображений может долго загружаться и генерировать несколько запросов к серверу.
Использование спрайтов изображений уменьшит количество запросов к серверу и сэкономит пропускную способность.
Спрайты изображений — простой пример
Вместо того, чтобы использовать три отдельных изображения, мы используем одно изображение («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 не может быть пустым. Отображаемое изображение будет фоновым изображением, которое мы указываем в CSS.width: 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, стиль списка удален, и все элементы списка имеют абсолютное позиционирование
- #navlist li, #navlist a {height:44px;display:block;} - высота всех изображений 44px
Теперь начните позиционировать и стилизовать каждую конкретную часть:
- #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 ширина 46px + разделитель строк 1px)
- #next {left:129px;width:43px;} – расположено на 129 пикселей вправо (начало #prev – 63 пикселя + ширина #prev 43 пикселя + дополнительный пробел), а ширина – 43 пикселя.
- #next {background:url('img_navsprites.gif') -91px 0;} — определяет фоновое изображение на 91px вправо (#home ширина 46px + разделитель строки 1px + #prev ширина 43px + разделитель строки 1px)
Спрайты изображений — эффект наведения
Теперь мы хотим добавить эффект наведения в наш список навигации.
Совет: Селектор :hoverможно использовать для всех элементов, а не только для ссылок.
Наше новое изображение ("img_navsprites_hover.gif") содержит три навигационных изображения и три изображения для эффектов наведения:
Поскольку это одно изображение, а не шесть отдельных файлов, задержки загрузки при наведении курсора на изображение не будет.
Мы добавляем только три строки кода, чтобы добавить эффект наведения:
Пример
#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: url('img_navsprites_hover.gif') 0 -45px;} — для всех трех изображений при наведении мы указываем одну и ту же позицию фона, только на 45 пикселей ниже