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 не может быть пустым. Отображаемое изображение будет фоновым изображением, которое мы указываем в CSSwidth: 46px; height: 44px;- Определяет часть изображения, которую мы хотим использоватьbackground: url(img_navsprites.gif) 0 0;- Определяет фоновое изображение и его положение (left 0px, top 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;} - margin и padding установлены 0, list-style удалён, и все элементы списка расположены в absolute
- #navlist li, #navlist a {height:44px;display:block;} - высота всех изображений 44px
Теперь начинаем позиционировать и стилизовать каждую конкретную часть:
- #home {left:0px;width:46px;} - Расположен полностью слева, а ширина изображения составляет 46px
- #home {background:url(img_navsprites.gif) 0 0;} - Определяет фоновое изображение и его положение (left 0px, top 0px)
- #prev {left:63px;width:43px;} - Расположен 63px справа (#home из 46px + некоторое дополнительное пространство между элементами), и ширина 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Определяет фоновое изображение 47px справа (#home из 46px + 1px разделитель строк)
- #next {left:129px;width:43px;} - Расположен 129px справа (начало из #prev 63px + #prev из 43px + экстра пространство) и ширина 43px.
- #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: transparent url('../images/img_navsprites_hover.gif') 0 -45px;} - Для всех трех изображений при наведении мы указываем одну и ту же позицию фона, только на 45 пикселей ниже
