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 пікселів нижче
