Два фона і більше
У CSS 2 додавання одночасно двох фонів до одного елемента неможливо, тому доводиться вкладати один елемент всередину іншого і для кожного вказувати власний фоновий малюнок. Для складних макетів таких вкладень іноді можна нарахувати близько десятка. Зрозуміло, що таке накопичення ні до чого доброго не призводить, але що робити? Виявляється, є вихід! У CSS 3 можна одночасно додавати декілька фонових малюнків для будь-якого елемента. Так що беремо малюнок блоку (рис. 1), ріжемо його на частини і починаємо тестувати в браузерах.
Для простоти, ширину блока беру фіксованого розміру, а висота буде тягнутися в залежності від контенту. По малюнку добре видно верхню та нижню частину, вирізаю в редакторі і складаю шарами в окремому файлі. Середню частину потрібно вибрати так, щоб вона повторювалася без швів по вертикалі. Малюнок має чітко виражений повторюваний орнамент, тому труднощі з виділенням бути не повинно. Копіюю і вставляю до попередніх фрагментів. У підсумку отримаємо такий малюнок (рис. 2).
У принципі, можна зберегти кожний фрагмент як окремий файл, але у CSS-спрайтів (так називається технологія склеювання декількох малюнків в один) є кілька переваг. По-перше, зменшується кількість запитів до серверу через скорочення кількості файлів, а по-друге, малюнки в сумі завантажуються та відображаються швидше.
Сам фон виводиться властивістю background, вона ж вказує і координати потрібного фрагменту. Параметри кожного фону перераховуються через кому, і в даному випадку має значення їх порядок. Мені потрібно, щоб верхня та нижня частина блоку не перекривалися, тому ставлю їх першими.
Приклад 1. Декілька фонових малюнків
HTML5CSS2.1CSS3IE 8IE 9CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Три фона</title>
<style type="text/css">
.aztec {
width: 212px; /* Ширина блока з урахуванням padding */
min-height: 300px; /* Мінімальна висота */
background:
url( images/aztec_block.png) 0 0 no-repeat,
url(images/aztec_block.png) -576px 100% no-repeat,
url(images/aztec_block.png) -288px 0 repeat-y;
padding: 38px; /* Поля навколо тексту з урахуванням межі */
}
</style>
</head>
<body>
<div class="aztec">
<p>Уицилопочтли — «колдун колібрі», бог війни і сонця.</p>
<p>Тескатлипока — «димляче дзеркало», головний бог ацтеків.</p>
<p>Обом богам приносили людські жертви.</p>
</div>
</body>
</html>Перший фон виводить верхню межу блоку, другий фон — нижню, а третій вертикальні межі.
Перевіряємо в браузерах. Internet Explorer 8 взагалі не вивів жодних малюнків, інші браузери (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) відобразили рамку коректно.
З використанням кількох фонів ситуація для розробників суттєво полегшується, особливо при верстці блоків. Залишається лише один дрібниця. Потрібно, щоб браузер IE 6–8 припинив своє існування.