CSS-спрайты изображений


Оглавление

    Показать оглавление


Спрайты изображений

Спрайт изображения — это набор изображений, объединенных в одно изображение.

Веб-страница с большим количеством изображений может загружаться долго и генерирует несколько запросов к серверу.

Использование спрайтов изображений уменьшит количество запросов к серверу и сэкономит пропускная способность.


Спрайты изображений — простой пример

Вместо использования трех отдельных изображений мы используем одно изображение («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 пикселей ниже.