Спрайт изображения — это набор изображений, объединенных в одно изображение.
Веб-страница с большим количеством изображений может загружаться долго и генерирует несколько запросов к серверу.
Использование спрайтов изображений уменьшит количество запросов к серверу и сэкономит пропускная способность.
Вместо использования трех отдельных изображений мы используем одно изображение («img_navsprites.gif»):
С помощью CSS мы можем показать только ту часть изображения, которая нам нужна.
В следующем примере CSS указывает, какая часть файла «img_navsprites.gif» изображение для показа:
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">
</body>
</html>
Пояснение примера:
<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;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#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;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
Пояснение примера:
#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;}
- Расположено на 63 пикселя вправо (#home ширина 46 пикселей + дополнительное пространство между элементами), ширина 43 пикселя.
#prev {background:url('img_navsprites.gif') -47px 0;}
- Определяет фоновое изображение на 47 пикселей вправо (#home ширина 46 пикселей + линия 1 пиксель). разделитель)
#next {left:129px;width:43px;}
- Расположено на 129 пикселей вправо (начало #prev — 63 пикселя + ширина #prev — 43 пикселя + дополнительное пространство), а ширина — 43 пикселя.
#next {background:url('img_navsprites.gif') -91px 0;}
- Определяет фоновое изображение на 91 пиксель вправо (#home ширина 46 пикселей + 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;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#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_hover.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites_hover.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites_hover.gif') -91px 0;
}
#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;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
Пример объяснен:
#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}
- Для всех трех изображений при наведении мы указываем одно и то же положение фона, только на 45 пикселей ниже.