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;- определяет фоновое изображение и его расположение (слева 0 пикселей, сверху 0 пикселей)
Самый простой способ использовать спрайты изображений, теперь мы хотим расширить его использование ссылок и эффектов наведения.
Спрайты изображений - создание списка навигации
Мы хотим использовать спрайтовое изображение ("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;}- определяет фоновое изображение и его положение (слева 0 пикселей, сверху 0 пикселей)- Элемент
#prev {left:63px;width:43px;}- расположенный вправо 63px (#home ширина 46px + некоторое дополнительное пространство между элементами), а ширина 43 пикселей. - Элемент
#prev {background:url('img_navsprites.gif') -47px 0;}- определяет фоновое изображение справа 47px (#home ширина 46px + 1px делитель линии) - Элемент
#next {left:129px;width:43px;}- расположенный справа 129px (сначало: #prev 63px + #prev ширина 43px + дополнительное место), а ширина 43 пикселей. - Элемент
#next {background:url('img_navsprites.gif') -91px 0;}- определяет фоновое изображение справа 91 пикселей (#home ширина 4 пикселей + 1 пикселей делитель линии + #prev ширина 43 пикселей + 1 пикселей делитель линии)
Спрайты изображений - эффект наведения
Теперь мы добавить эффект наведения в наш список навигации.
Совет: Селектор :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: transparent url('img_navsprites_hover.gif') 0 -45px;}- для всех трех изображений при наведении указываем одну и ту же позицию фона, только 45px дальше внизу