Важливою частиною веб-дизайну служать фони (backgrounds і далі фони) CSS. У властивостях (ве) фону розташовують кольору і зображення, службовці фоном контенту і відповідають за естетику сайту. Видаліть СSS фони з вашого сайту, і він швидше за все постане у вигляді тексту на білому тлі.
Будучи відносно легкими для розуміння, фони СSS, тим не менш, можуть викликати нерозуміння і підняти ряд питань при роботі над специфічними завданнями. Постараємося прояснити це нерозуміння і відповісти на питання, що виникають при вирішенні специфічних завдань.
Що таке СSS фони?
По суті, в імені СSS фонів і укладено їх визначення. Це те, що ви додаєте до фону елемента. А точніше вони є кольором або зображенням, розташованим за тим контентом, що додали всередину елемента. При розробці заснованого на CSS сайту ці кольори і зображення зазвичай відповідають за більшу частину дизайну у вашому шаблоні.
Фон елемента описується згідно блокової моделі СSS. Поля (margin) не є частиною фону, але частиною фону є кордону (border), підкладки (або відступи) (padding) і ширина контенту (width).
Існують 5 фонових властивостей, які можна застосувати до CSS селектору, 4 з яких застосовуються до фоновим зображенням:
Фоновий колір (background-color) - - встановлює фоновий колір елемента. Кольором може бути задано значення hex, rgb або одне з обмежених колірних імен. Також фоновий колір може бути заданий прозорим або успадкувати значення батьківського елемента. Більш докладно в статті CSS кольору в веб-дизайні Фонове зображення (background-image) - - встановлює зображення як фон до елементу, а його значення виглядає як url ( «шлях-до-зображенню»). Властивість background-image може також мати значення none і inherit. Повтор фону (background-repeat) - - встановлює повторення фонового зображення. Значення: repeat. no-repeat. repeat-x. repeat-y і inherit. Фоновий додаток (background-attachment) - - встановлює, як фоновий додаток буде рухатися зі сторінкою. Воно може прокручувати (scroll. При скроллінгом сторінки рухається з елементом, значення за замовчуванням), залишається фіксованим (fixed. Залишається фіксованим в разі, коли сторінка скролліруется) або переймати (inherit) значення батьківського елемента. Позиція фону (background-position) - - встановлює стартову позицію фонового зображення в елементі. У властивості background-position два значення, положення по горизонталі (може бути - left, center, right) і вертикалі (може бути - top, center, bottom). Позицію фону можна також встановити в% від верхнього лівого кута елементу.
Скорочення правил СSS відносяться до фону
Можна ставити кожне властивість фону індивідуально, однак на практиці це краще спростити. При цьому властивості слід задавати в наступному порядку: колір, зображення, повтор, додаток, позиція (color, image, repeat, attachment, position).
При такому спрощенні не потрібно задавати все властивості, але необхідно використовувати правильний порядок. Незадані вами властивостями будуть присвоєні наступні значення за замовчуванням:
- background-color: transparent
- background-image: none
- background-repeat: repeat
- background-attachment: scroll
- background-position: 0% 0%
Приклад скорочення записи показаний нижче:
У кожній з наведених вище рядків коду для не задані спеціально властивостей будуть використовуватися значення за замовчуванням.
Фонові зображення CSS не є HTML зображеннями
Важливо розуміти, що зображення, що задаються за допомогою CSS фону, поводяться інакше, ніж зображення, що задаються за допомогою тега .
Тег img створює новий блок. Фонове зображення СSS поміщається в існуючий блок. До фонового зображення СSS можна додати поля, кордон і підкладку. Також фонового зображення CSS можна задати ширину і висоту.
Оскільки зображення в html - це новий блок (вбудований блок, тобто він обтекается іншими елементами), у нього є ширина і висота, підкладки та поля, а також межа. Більш того, до тегу img можна застосувати фонове зображення CSS. Не знаю, як часто це застосовується на практиці, але за бажанням за зображення можна додати фонове зображення.
Відповіді на поширені питання
Хоча фонове властивість відносно легко у використанні і розумінні, робота з ним, проте, може викликати ряд питань.
1. Чому фонове зображення не відображається?
Зазвичай це пов'язано з тим, що елемент не має ні ширини, ні висоти. Пам'ятайте, що фонове зображення не створює блоку, а наповнює існуючий. Якщо цей блок не має ні ширини, ні висоти, наповнити просто нічого. Рішенням буде надання елементу розмірів. Можна задати елементу (НЕ фонового зображення) висоту і ширину, або ж наповнити елемент контентом, де ширина і висота створяться самі.
У деяких випадках усередині елемента може міститися контент, до якого було застосовано властивість float. вириває контент з основного потоку документа. В цьому випадку містить контент елемент (куди хочуть додати фон) формально не має розмірів. Щоб елемент мав розміри (щоб контент, до якого застосовано властивість float. Як б не виривався з основного потоку документа) до нього потрібно застосувати властивість overflow.
2. Чи можу я використовувати кілька фонових зображень?
Так і ні. Специфікація СSS3 дозволяє використовувати кілька фонових зображень, проте так як не всі браузери керуються цією специфікацією в повній мірі, то з використанням декількох зображень краще почекати.
Не слід також забувати, що до всіх HTML-елементів можна застосувати фон. Скажімо, у вас є div. містить h2 і параграф. До кожного з них можна застосувати фонові зображення і, контролюючи інші СSS cвойства. можна домогтися потрібного. ефекту. Можна так само вставити додаткові div і span всередині і зовні елемента, що створить більше елементів, до яких можна додати фон. Такий підхід досить громіздкий, але він працює.
3. Як міняти місцями фонові зображення при наведенні мишки на елемент?
Існує два способи. Потрібно додати нове правило до елементу з псевдоклас: hover. щоб воно вказувало (background-image) на нове зображення, або зробити зображення у вигляді CSS спрайту і міняти його фонову позицію (background-position), для показу іншій частині спрайту.
4. Як зробити фонові зображення прозорими?
(Питання відкритий) На жаль, цього зробити не можна. Прозорість можна задати елементу, а не конкретно фонового зображення. Якщо ви задасте прозорість елементу, пам'ятайте, що все всередині елемента отримає цю прозорість. Більш докладно про прозорість можна дізнатися в статті кросбраузерності прозорі колонки
Надати прозорість зображення можна при створенні його в фотошопі. У цьому випадку вид зображення можна змінювати, однак бачити через нього все одно буде не можна.
5. Чи можна розташувати фонове зображення в таблиці, рядку таблиці або комірки таблиці?
Так. Це все html-елементи, тому вони можуть приймати фонові властивості. Однак фони таблиць мають складний спосіб визначення, в якому використовуються шари і прозорість, як показано на наведеному нижче малюнку:
Фон елемента одного шару видно тільки в тому випадку, якщо фон розташованих над ним шарів прозорий. Це може здатися досить заплутаним, тому багато хто воліє користуватися html-атрибутами при створенні фону у таблиць.
На щастя, значення прозорості стоїть за умовчанням, тому розташовані вище шари вже повинні бути прозорими. Однак, як тільки ви почнете додавати фони до однієї частини таблиці, домогтися правильної роботи може виявитися досить складно
6. Чи можна додати фонове зображення кордонів?
Поки немає. Це властивість обіцяють реалізувати в СSS3. Якщо вас не бентежить, що воно не буде працювати в багатьох браузерах, то можете скористатися ним вже зараз.
7. Чи можна додати фонові зображення списками?
Так. Списки ті ж html-елементи, тому можуть приймати фонові зображення. Фонове зображення легко можна використовувати в якості булліта (маркера) списку. Думаю труднощів з цим не виникне.
8. Як додати відступ фонового зображення?
Як було мною згадано раніше, фонове зображення не створює новий CSS блок, тому до нього не можна додати підкладку. Замість цього треба скористатися властивістю фонова позиція (background-position), щоб змістити з'явилося фонове зображення. Також існують і інші способи.
9. Як вирівняти фонове зображення по правому краю.
Подібно попереднім питань відповідь пов'язана з фонової позицією (background-position). Скористайтеся значенням right для властивості background-position (background-position: right;) і зображення буде вирівняно по правому краю елемента.
10. Чому в надрукованому вигляді фонове зображення не відображається?
11. Як розтягнути фонове зображення, щоб воно відповідало елементу?
Коли відбудеться остаточний реліз CSS3, відповісти на питання допоможе властивість розмір фону. Більш докладно в статті Великий розмір фону, будь ласка!
Іншим можливим рішенням є створення зображення, розміри якого набагато більше потрібних, і фонова позиція встановлена на 50% 50%. Таким чином, фонове зображення буде центрировано всередині елемента, а в міру зростання ширини елемента все більше зображення стає видно. Зображення при цьому буде залишатися центровані.
Це не зовсім розтягування, але такий спосіб дозволяє бути впевненим, що зображення заповнює простір, в разі, коли простір стає більше.
12. Чи можна обернути посилання навколо фонового зображення?
Ні. Ще раз, фонові зображення не створюють блоки. Рішенням буде додавання посилання навколо всього контенту всередині html-елемента або охоплення (обгортання) посилання навколо самого елемента. Вибір варіанту залежить html-елемента і контенту всередині цього елемента.
висновок
У тому, яке враження справляє ваш дизайн на користувача, фони CSS відіграють ключову роль. Більшість створених вами зображень для вашого сайту будуть задані за допомогою фонового властивості, тому саме їм слід опанувати перш за все.