спрайтов
Спрайт изображение представляет собой набор изображений, введенных в одно изображение.
Веб-страницы с большим количеством изображений может занять много времени для загрузки и генерирует несколько запросов сервера.
Использование спрайтов уменьшит количество запросов к серверу и сохранить пропускную способность.
Спрайты - Простой пример
Вместо того чтобы использовать три отдельных изображений, мы используем это одно изображение ("img_navsprites.gif") :
С помощью CSS, мы можем показать только часть изображения нам нужно.
В следующем примере CSS определяет , какая часть "img_navsprites.gif" изображение , чтобы показать:
Объяснение примера:
-
<img id="home" src="img_trans.gif">- определяет только маленькое прозрачное изображение , поскольку атрибут SRC не может быть пустым. Отображаемое изображение будет фоновое изображение мы указываем в CSS -
width: 46px; height: 44px;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;} направо #home {left:0px;width:46px;} - Помещенный весь путь влево, а ширина изображения 46px
- #home {background:url(img_navsprites.gif) 0 0;} - Определяет фоновое изображение и его положение (слева 0px, сверху 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 эффект
Теперь мы хотим, чтобы добавить эффект парения в наш список навигации.
 | Совет: :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 дальше вниз