- Додавання кольору фону
- Прозорий фон
- Додавання фонового зображення
- background-repeat
- background-position
- значення background
- Приклад фонового зображення
- Демонстрація фонової картинки
- Дизайн градиентного фону
- Вендорний префікси для градієнта
- лінійний градієнт
- Демонстрація лінійного градієнта
- Зміна напряму градієнта
- Демонстрація напрямки лінійного градієнта
- радіальний градієнт
- Демонстрація радіального градієнта
- Генератор градієнтів CSS3
- Стоп-кольору
- Демонстрація стоп-кольорів в градієнті
- Позиціонування стоп-кольорів в градієнті
- приклад градієнта
- Демонстрація градиентного фону
- Демонстрація і вихідний код
- Використання декількох фонових зображень
- Приклад декількох фонових зображень
- Демонстрація кількох фонових зображень
- background-size
- Демонстрація background-size
- background-clip і background-origin
- резюме
- Ресурси і посилання
Фон робить значний вплив на дизайн сайту. Він допомагає створити вражаюче виглядає сайт, встановити групування і визначити пріоритет, фон також серйозно впливає на юзабіліті сайту.
В CSS фон елемента може бути суцільного кольору, зображенням, градієнтом або їх комбінацією. Коли ми вирішуємо, як реалізувати такий фон, то повинні розуміти, що кожен фон впливає на загальний вигляд нашого сайту.
У цьому уроці ми розглянемо як призначати різні типи фону для елементів, в тому числі градієнти. Ми також пограємо з набором властивостей CSS3, пов'язаних з фоном.
Додавання кольору фону
Найшвидший спосіб додати фон до елементу - це встановити однотонний фон за допомогою властивості background або background-color. Властивість background приймає колір і зображення в скороченою формі, в той час як властивість background-color використовується строго для установки суцільний фонової заливки. Обидва властивості працюють, а яке ви вирішите використовувати залежить від ваших уподобань, а також ситуації.
div {background-color: # b2b2b2; }
При додаванні кольору фону у нас є кілька варіантів значень, які ми можемо використовувати. Подібно до інших колірним значенням ми можемо вибрати з ключових слів, шістнадцятирічних кодів і значень RGB, RGBa, HSL і HSLa. Найчастіше ми зустрінемо шістнадцяткові значення, проте можемо іноді побажати задіяти RGBa або значення HSLa для прозорості.
Прозорий фон
При використанні значення RGBa або HSLa в якості прозорого кольору фону хорошою ідеєю буде забезпечити також запасний колір, тому що не всі браузери розуміють RGBa або HSLa. І коли браузер зустрічає значення, яке він не розпізнає, то ігнорує його.
На щастя, є простий спосіб забезпечити запасний варіант для фону. CSS КАСКАДІРУЕТСЯ з верхньої частини файлу до його низу, таким чином, ми можемо використовувати два властивості background-color в єдиному наборі правил. Перше властивість background-color включатиме «безпечний» колір фону у вигляді шістнадцятирічного значення, а друга властивість background-color буде використовувати RGBa або HSLa. При цьому, якщо браузер розуміє значення RGBa або HSLa, то відобразить його, а якщо немає, то повернеться до шістнадцятиричним значенням перед ним.
div {background-color: # b2b2b2; background-color: rgba (0, 0, 0, .3); }
Додавання фонового зображення
Крім кольору фону елемента ми можемо також додати до нього фонове зображення. Такі зображення працюють аналогічно кольором фону, проте пропонують кілька додаткових властивостей для уточнення. Як і раніше, ми можемо використовувати властивість background зі скороченим значенням або властивість background-image безпосередньо. Незалежно від застосовуваного властивості вони вимагають вказати джерело зображення за допомогою функції url ().
Значення функції url () буде адресою фонової картинки і до нього застосовуються знайомі правила для створення шляху гіперпосилання. Слідкуйте за різними папками і не забудьте показати, де саме знаходиться зображення. Шлях поміщається всередині дужок і лапок.
div {background-image: url ( "alert.png"); }
Додавання фонового зображення з одним лише значенням url може видати небажані результати, так як за замовчуванням фонове зображення буде повторюватися по горизонталі і вертикалі від лівого верхнього кута даного елемента, щоб заповнити фон елемента цілком. На щастя, ми можемо використовувати властивості background-repeat і background-position для управління, як саме повторювати картинки.
background-repeat
За замовчуванням, фонове зображення буде повторюватися нескінченно по вертикалі і горизонталі, якщо не вказано інше. Властивість background-repeat може бути використано щоб змінити напрямок, в якому фонова картинка буде повторюватися, якщо вона взагалі повторюється.
div {background-image: url ( "alert.png"); background-repeat: no-repeat; }
Властивість background-repeat приймає чотири різних значення: repeat, repeat-x, repeat-y і no-repeat. repeat є значенням за замовчуванням і повторює фонове зображення по вертикалі і по горизонталі.
Значення repeat-x повторює фонове зображення по горизонталі, в той час як значення repeat-y повторює його по вертикалі. Нарешті, значення no-repeat говорить браузеру відобразити картинку один раз, тобто не повторювати її взагалі.
background-position
За замовчуванням, фонова картинка розташовується в лівому верхньому кутку елемента. Проте, за допомогою властивості background-position ми можемо контролювати, де саме зображення розміщується щодо цього кута.
div {background-image: url ( "alert.png"); background-position: 20px 10px; background-repeat: no-repeat; }
Властивість background-position вимагає два значення: горизонтальне зміщення (перше значення) і вертикальне зміщення (друге значення). Якщо вказано тільки одне значення, то воно застосовується для горизонтального зсуву, а вертикальне за замовчуванням задається як 50%.
Оскільки ми рухаємо фонове зображення з лівого верхнього кута елемента, значення розміру будуть безпосередньо прив'язані до цього кутку.
Щоб встановити значення background-position ми можемо використовувати ключові слова top, right, bottom і left, пікселі, відсотки або будь-яку одиницю розміру. Ключові слова і відсотки працюють дуже схоже. Значення left top ідентично процентному значенням 0 0, яке має в своєму розпорядженні зображення в лівому верхньому кутку елемента. Значення right bottom ідентично процентної записи 100% 100% і буде позиціонувати зображення в правому нижньому кутку елемента.
Мал. 7.01. Фонові зображення позиціонуються від лівого верхнього кута елемента
Одним з переваг відсотків у порівнянні з ключовими словами є можливість центрування фонового зображення за допомогою значення 50%. Для розміщення фонового зображення у верхній частині елемента, ми можемо використовувати значення 50% 0. Застосування пікселів в якості значення background-position також поширене, так як пікселі дають нам точний контроль над становищем фону.
значення background
Властивості background-color, background-image, background-position і background-repeat можуть виступати значенням для одиничного властивості background. Порядок цих властивостей в background може варіюватися, але зазвичай він такий: background-color, background-image, background-position, а потім background-repeat.
div {background: # b2b2b2 url ( "alert.png") 20px 10px no-repeat; }
Приклад фонового зображення
У наступному прикладі ми будемо використовувати властивість background, яке включає значення background-color, background-image, background-position і background-repeat.
Будь ласка, зверніть увагу, що в background-position міститься відносне і абсолютне значення. Перше значення, 20 пікселів - це горизонтальна величина, позиціонування background-image на 20 пікселів від лівого краю елемента. Друге значення, 50% - це вертикальна величина, яка центрує фонове зображення по вертикалі.
Кілька інших властивостей і значень також включені в правила класу notice-success, щоб встановити подальший стиль повідомлення.
HTML
<Div class = "notice-success"> Ура! Вітаємо, ви зробили це! </ Div>
CSS
.notice-success {background: # 67b11c url ( "tick.png") 20px 50% no-repeat; border: 2px solid # 467813; border-radius: 5px; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 15px 20px 15px 50px; }
Демонстрація фонової картинки
На практиці
Повертаючись до нашого сайту Styles Conference, давайте додамо трохи фонового кольору. Поки ми це робимо, змінимо кілька інших стилів, щоб змусити всі наші стилі працювати спільно і зберегти все наше зміст розбірливими.
Почнемо з великого кроку і застосуємо синій фон до елементу <body> поряд з наявними властивостями color і font. Всі стильові правила для елемента <body>, встановлені на даний момент, включають наступне:
body {background: # 293f50; color: # 888; font: 300 16px / 22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
Ми помістили синій фон для елементу <body> навмисно, так як наш сайт буде містити кілька різних рядів background, а найбільш частим кольором фону буде синій.
Тепер, коли кожна сторінка на нашому сайті Styles Conference включає в себе синій фон, давайте очистимо кілька областей з цим синім фоном. Зокрема, наші елементи <header> і <footer> залишаться синіми, як і розділ hero на головній сторінці.
Усередині елементів <header> і <footer> вкажемо колір посилань білим, а потім при наведенні на них курсора миші тим же зеленим, що і заголовки.
Почнемо з елементу <header>. Щоб вибрати всі елементи <a> всередині елемента <header> ми додамо клас primary-header до <header> (на додаток до існуючих класів container і group). Не забувайте, ми повинні додати цей клас до елементів <header> у всіх наших сторінках.
<Header class = "primary-header container group"> ... </ header>
З класом primary-header у елемента <header> і існуючим класом primary-footer у <footer> ми можемо додати два нових правила нижче розділу з посиланнями в нашому файлі main.css.
Перший набір правил буде вибирати все елементи <a> всередині елемента з класом primary-header або primary-footer і встановить їх колір на білий, як це визначено коми, що розділяє два окремих селектора, у яких один і той же властивість і значення. Другий набір правил буде вибирати ті ж елементи <a> що і раніше, але вони поміняються колір на зелений, коли користувач наводить на них покажчик.
.primary-header a, .primary-footer a {color: #fff; } .Primary-header a: hover, .primary-footer a: hover {color: # 648880; }Поки ми робимо деякий текст білим, давайте зробимо текст в розділі hero на головній сторінці теж білим, так як він буде залишатися на синьому тлі. У нас є існуючий клас hero, до якого можна додати стилі, так що встановимо білий колір тексту в ньому. В цілому, набір правил для класу hero повинен включати в себе наступне:
.hero {color: #fff; line-height: 44px; padding: 22px 80px 66px 80px; text-align: center; }
Також в розділі hero нашої головної сторінки приберемо деякі стилі кнопок. Почнемо з додавання кількох нових властивостей для набору правил з класом btn, в розділі з кнопками нашого файлу main.css.
Зокрема, замінимо колір тексту кнопки на білий, задамо cursor як pointer, збільшимо font-weight, додамо невелику відстань в letter-spacing і змінимо text-transform на uppercase.
В цілому, наш новий набір правил для класу btn повинен виглядати наступним чином:
.btn {border-radius: 5px; color: #fff; cursor: pointer; display: inline-block; font-weight: 400; letter-spacing: .5px; margin: 0; text-transform: uppercase; }
Ми також очистимо деякі стилі запасних кнопок шляхом установки класу btn-alt. Зокрема, зробимо рамку у кнопки білої і додамо стиль для: hover, який включає білий фон і синій колір тексту.
З усіма доповненнями наш новий клас btn-alt повинен виглядати наступним чином:
.btn-alt {border: 1px solid #fff; padding: 10px 30px; } .Btn-alt: hover {background: #fff; color: # 648880; }Тепер у нас є все області очищені від синього фону, давайте додамо стилі для смуг, у яких заданий білий фон. Вставимо новий розділ всередині нашого файлу main.css для смуг, трохи нижче розділу clearfix. В цьому розділі створимо новий селектор класу з ім'ям row.
У цьому новому класі row додамо білий фон, мінімальну ширину 960 пікселів (щоб переконатися, що row завжди більше, ніж width у елементів container або grid) і padding по вертикалі. В цілому наш новий розділ в нашому файлі main.css повинен виглядати наступним чином:
/ * ======================================== Смуги ======= ================================= * / .row {background: #fff; min-width: 960px; padding: 66px 0 44px 0; }З цим класом row додамо смугу з білим фоном на головній сторінці. Ми зробимо це для розділів з тизерами. В даний час ця область містить елемент <section> з класом grid який обгортали три додаткових <section> з класами teaser і col-1-3.
Щоб додати білий background до цього розділу, ми збираємося обернути всі ці елементи в елемент з класом row.
Оскільки ми хочемо обернути розділи з усіма тизерами елементом <section>, то збираємося додати новий елемент <section> з класом row, який оточує існуючий <section> з класом grid.
Наявність двох елементів <section> які обертають один вміст знижує семантичне вплив. Щоб виправити це, ми змінимо другий елемент <section> з класом grid на елемент <div>. Зрештою, цей елемент тільки додає стилі, а не смислове значення, тому підходить елемент <div>.
Структура наших тізерів повинна виглядати наступним чином:
<Section class = "row"> <div class = "grid"> <! - Спікери -> <section class = "teaser col-1-3"> ... </ section> <! - Розклад - -> <section class = "teaser col-1-3"> ... </ section> <! - Місце проведення -> <section class = "teaser col-1-3"> ... </ section > </ div> </ section>
Дивно, як кілька фонових кольорів можуть впливати на дизайн веб-сайту. Наш сайт Styles Conference стає все кращою і головна сторінка тому доказ.
Мал. 7.02. Головна сторінка сайту Styles Conference після додавання декількох кольорів фону
Дизайн градиентного фону
Градієнтні фони були введені з CSS3, дизайнери і фронтенд-розробники щосили раділи цьому. Хоча градієнтні фони не працюють в старих браузерах, вони підтримуються всіма сучасними браузерами.
В CSS градієнтні фони розглядаються як фонові зображення. Ми можемо створити градієнт за допомогою властивості background або background-image, як звичайну фонову картинку. Значення властивості для градієнта змінюється в залежності від того, який градієнт нам би хотілося - лінійний або радіальний.
Вендорний префікси для градієнта
В уроці 4, "Відкриваємо блокову модель», ми обговорювали додавання Вендорний префіксів до нових властивостями або значенням CSS, так що браузери можуть підтримувати недавно розроблені можливості CSS. Градієнти були одними з значень, які вимагали використання префіксів. На щастя, для більшості браузерів відпала необхідність в префіксах для відображення градієнтів, тим не менш, все одно варто вказати префікси для забезпечення кращої підтримки.
Спершу ми почнемо обговорювати лінійні градієнти і включимо різні префікси. Після цього в інтересах стислості ми опустимо префікси, коли продовжимо обговорювати градієнти, в тому числі радіальні.
лінійний градієнт
Протягом багатьох років дизайнери і розробники нарізали градієнтні зображення, створені за допомогою графічних редакторів і застосовували до елементів картинки в якості лінійних градієнтів. Процес працював, але забирав час для реалізації і був надзвичайно негнучким. На щастя ці часи минули і лінійні градієнти тепер можуть бути задані в CSS. Якщо колір потребує зміни, немає необхідності повторно розрізати зображення і завантажувати його на сервер. Тепер все що потрібно зробити, це швидко змінити значення в CSS. Краса.
div {background: # 466368; background: -webkit-linear-gradient (# 648880, # 293f50); background: -moz-linear-gradient (# 648880, # 293f50); background: linear-gradient (# 648880, # 293f50); }
Демонстрація лінійного градієнта
Лінійні градієнти визначаються за допомогою функції linear-gradient () у властивості background або background-image. Функція linear-gradient () повинна включати в себе два значення кольору, перше з яких буде початковим квітів, а друге кінцевим кольором. Браузер потім обробить перехід між двома квітами.
Перед визначенням будь-якого градієнтного фону ми також вставимо властивість background за замовчуванням з однотонним кольором. Такий колір повинен бути використаний в якості запасного, якщо браузер не підтримує градієнт.
Зміна напряму градієнта
За замовчуванням, лінійний градієнт рухається з верхньої до нижньої частини елемента, плавно переходячи між першим і другим значенням кольору. Цей напрямок, проте, може бути змінено за допомогою ключових слів або значення кута, заданим перед будь-якими значеннями кольору.
Наприклад, якщо ми хочемо, щоб градієнт в елементі рухався зліва направо, ми можемо використовувати значення to right для вказівки напряму, в якому лінійний градієнт повинен просуватися. Ключові слова також можуть бути об'єднані. Якщо ми хочемо, щоб градієнт переходив від лівої верхньої до правої нижньої частини елемента, ми можемо використовувати значення ключового слова to right bottom.
div {background: # 466368; background: linear-gradient (to right bottom, # 648880, # 293f50); }
Демонстрація напрямки лінійного градієнта
Коли ми застосовуємо діагональний градієнт в не зовсім квадратному елементі, градієнт не переходить безпосередньо з одного кута в інший. Замість цього градієнт визначить абсолютний центр елемента, помістить опорні точки в протилежних кутках, звідки він повинен просуватися і тільки потім рушить в напрямку кута, заданому в значенні. Ці кути, які переміщує градієнт, називаються «чарівні куточки», так як вони не є абсолютними. Ерік Мейер виконав чудову роботу з викладом цього синтаксису в своїй статті Linear Gradient Keywords .
Крім ключових слів також допускаються кути. Якщо ми хочемо, щоб наш градієнт рухався до лівої верхньої частини елемента ми можемо використовувати значення кута 315deg, також якщо ми хочемо, щоб наш градієнт рухався до правої нижньої частини елемента, ми можемо використовувати значення 135deg. Цей же підхід може бути застосований для будь-якого значення кута, від 0 до 360º.
радіальний градієнт
У той час як лінійний градієнт ідеально підходить для градієнтного переходу від одного напряму до іншого, часто виникає необхідність в радіальному градієнті. Радіальні градієнти працюють так само, як лінійні і повторюють більшість з тих же значень. Для радіальних градієнтів замість функції linear-gradient () у властивості background або background-image ми будемо використовувати функцію radial-gradient ().
div {background: # 466368; background: radial-gradient (# 648880, # 293f50); }
Демонстрація радіального градієнта
Радіальні градієнти працюють зсередини назовні елемента. Таким чином, перший колір заданий в функції radial-gradient () буде розташовуватися в абсолютному центрі елемента, а другий колір буде перебувати на зовнішній стороні елемента. Браузер потім створить перехід між цими двома кольорами.
Одним з основних відмінностей между радіальнімі и лінійнімі градиентами є ті, что радіальні градієнті могут буті Досить складна, зі значеннями положення, розміром, радіусом и так далі. Ми розглянемо основи, але, будь ласка, не соромтеся заглибитися в радіальні градієнти, так як вони набагато потужніші, ніж викладено тут.
Генератор градієнтів CSS3
Ручна робота з градієнтами може бути деколи досить важкою, особливо якщо ви початківець. На щастя, з'явилося кілька генераторів градієнтів CSS3 . Кожен генератор працює трохи по-своєму і деякі надають більше можливостей, ніж інші. Якщо ви зацікавилися, я рекомендую покопатися і знайти відповідний генератор для ваших потреб.
Стоп-кольору
Як мінімум, градієнтний фон переходить від одного кольору до іншого, однак, ми можемо додати кілька квітів до градієнту і змусити браузер зробити по всім ним перехід. Для цього ми додамо стоп-кольору в цю функцію градієнта - з запитом, які відокремлюють один колір від іншого.
div {background: # 648880; background: linear-gradient (to right, # f6f1d3, # 648880, # 293f50); }
Демонстрація стоп-кольорів в градієнті
За замовчуванням браузер буде позиціонувати кожен стоп-колір на рівній відстані від наступного і переходити між ними відповідно. Якщо потрібно більше контролю над тим, як бажано розташувати кольори, то їх місця в градієнті можуть бути визначені для кожного кольору. Місце має бути оголошено як значення розміру і йде після значення кольору.
div {background: # 648880; background: linear-gradient (to right, # f6f1d3, # 648880 85%, # 293f50); }
Позиціонування стоп-кольорів в градієнті
Якщо не вказано інше, то перший колір буде позиціонуватися на 0%, а останній колір на 100%.
приклад градієнта
Використовуючи те саме повідомлення про успіх, що вже було раніше, ми поміняємо старе фонове зображення на лінійний градієнт.
Для цього ми включимо два властивості background. Перше властивість background визначає шістнадцяткове значення однотонного кольору, який служить в якості запасного варіанту на випадок, якщо браузер не підтримує лінійні градієнти. Друге властивість background включає в себе функцію linear-gradient (), яка задає зелений градієнт, який переходить від верхньої частини елемента до його нижньої частини.
HTML
<Div class = "notice-success"> Ура! Вітаємо, ви зробили це! </ Div>
CSS
.notice-success {background: # 67b11c; background: linear-gradient (# 72c41f, # 5c9e19); border: 2px solid # 467813; border-radius: 5px; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 15px 20px; }
Демонстрація градиентного фону
на практике
З наявним набором градієнтів давайте створимо нову смугу для нашого сайту Styles Conference, на цей раз за допомогою градієнта.
Ми зробимо нову смугу з градієнтом за допомогою класу row-alt. Оскільки для нової смуги задано той же властивість і значення min-width що і для класу row, ми об'єднаємо ці два селектора.
.row, .row-alt {min-width: 960px; }
Далі ми хочемо створити новий набір правил і застосувати стилі спеціально до класу row-alt. Ці нові стилі включатиме в себе градієнтний background, який починається з зеленого кольору і переходить до жовтого, зліва направо.
Використовуючи функцію linear-gradient () з відповідними значеннями і Вендорний префіксами, ми додамо градієнтний background для класу row-alt. Також включимо один background перед градієнтним background як запасний варіант, на той випадок, якщо браузер не підтримує градієнти.
Нарешті, ми також додамо і деякий вертикальний padding. Наш оновлений розділ тепер виглядає наступним чином:
.row, .row-alt {min-width: 960px; } .Row {background: #fff; padding: 66px 0 44px 0; } .Row-alt {background: # cbe2c1; background: -webkit-linear-gradient (to right, # a1d3b0, # f6f1d3); background: -moz-linear-gradient (to right, # a1d3b0, # f6f1d3); background: linear-gradient (to right, # a1d3b0, # f6f1d3); padding: 44px 0 22px 0; }
Стилі row-alt на місці, давайте скористаємося ними на всіх наших внутрішніх сторінках. В даний момент всі вони містять елемент <section> з класом container. Потім, всередині кожного <section> є елемент <h1>, що містить заголовок сторінки.
Ми збираємося змінювати ці елементи <section> так само, як ми зробили розділ з тизером на головній сторінці. Ми обернём кожен елемент <section> з класом container елементом <section> з класом row-alt. Потім змінимо кожен елемент <section> з класом container на елемент <div> для кращої відповідності семантики.
Кожна з наших внутрішніх сторінок повинна тепер включати в себе наступне:
<Section class = "row-alt"> <div class = "container"> <h1> ... </ h1> </ div> </ section>
Раз ми оновлюємо наші внутрішні сторінки, давайте зробимо у них вступ трохи більш привабливим. Почнемо з додавання вступу на кожній сторінці трохи нижче <h1> в кожному елементі <section> з класом row-alt. Наша сторінка speakers.html, наприклад, тепер може включати наступний розділ:
<Section class = "row-alt"> <div class = "container"> <h1> Спікери </ h1> <p> Ми раді вітати більше двадцяти спікерів, готових представити новітні технології в галузі. Готуйтеся до надихає феєрії. </ P> </ div> </ section>
Додатково зі вставкою абзацу також змінимо деякі стилі в розділі зі вступом. Щоб зробити це, ми додамо клас lead до елементу <div>, який вже містить клас container. Він може бути знайдений усередині елемента <section> з класом row-alt. Наш вступ для кожної внутрішньої сторінки тепер буде виглядати так:
<Section class = "row-alt"> <div class = "lead container"> ... </ div> </ section>
Після того, як клас lead знаходиться на своєму місці, ми вирівняємо по центру весь текст всередині цих елементів <div>. Також збільшимо font-size і line-height у всіх абзаців в цих <div>.
Створіть новий розділ для вступу в нашому файлі main.css, трохи нижче розділу з типографікою, і додайте наступні стилі:
/ * ======================================== Вступ ======= ================================= * / .lead {text-align: center; } .Lead p {font-size: 21px; line-height: 33px; }
Внутрішні сторінки нашого сайту Styles Conference вже отримали давно назрілу любов у вигляді градієнта для вступу. Переконайтеся, що ви оновили код для всіх внутрішніх сторінок і бачите їх нове покращене вміст, заголовки і абзаци.
Мал. 7.03. Сторінка Спікери сайту Styles Conference, в комплекті з градієнтом
Демонстрація і вихідний код
Нижче ви можете переглянути сайт Styles Conference в його нинішньому стані, а також завантажити вихідний код сайту на даний момент.
Перегляд сайту Styles Conference або Завантажити вихідний код
Використання декількох фонових зображень
Довгий час до елементів дозволялося додавати тільки одне фонове зображення за раз, що створювало чимало труднощів при дизайні сторінок. На щастя, в CSS3 ми можемо використовувати більш одного фонового зображення для елемента, розділяючи комами кілька фонів у властивості background або background-image.
Фонове зображення йде першим буде на передньому плані, а останнє в списку фонове зображення буде на задньому плані. Будь-яке значення між першим і останнім буде, відповідно, розташовуватися посередині між ними. Ось приклад CSS для елемента <div>, який використовує три фонових зображення:
div {background: url ( "foreground.png") 0 0 no-repeat, url ( "middle-ground.png") 0 0 no-repeat, url ( "background.png") 0 0 no-repeat; }
Даний код використовує скорочене значення для властивості background, пов'язуючи кілька фонових картинок разом. Ці скорочені значення також можуть бути розбиті за властивостями background-image, background-position і background-repeat зі значеннями, розділеними комами.
Приклад декількох фонових зображень
Давайте ще раз повернемося до повідомлення про успіх, щоб об'єднати фонову картинку галочки з градієнтом.
Щоб зробити це, ми включимо два значення в друге властивість background. Перше значення буде картинкою галочки на передньому плані. Друге значення буде лінійним градієнтом на задньому плані. Ці два значення розділяються комою.
HTML
<Div class = "notice-success"> Ура! Вітаємо, ви зробили це! </ Div>
CSS
.notice-success {background: # 67b11c; background: url ( "tick.png") 20px 50% no-repeat, linear-gradient (# 72c41f, # 5c9e19); border: 2px solid # 467813; border-radius: 5px; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 15px 20px 15px 50px; }
Демонстрація кількох фонових зображень
Вивчаємо нові властивості фону
Поряд з градієнтами і декількома фоновими зображеннями, CSS3 представив три нових властивості: background-size, background-clip і background-origin.
Властивість background-size дозволяє змінити розмір фонового зображення, в той час як властивості background-clip і background-origin дозволяють контролювати, як фонове зображення обрізається і де фонове зображення розташовується в елементі (всередині border або всередині padding, наприклад).
background-size
Властивість background-size дозволяє вказати розмір фонового зображення. Це властивість приймає кілька значень, в тому числі розмір і ключові слова.
При використанні розміру ми можемо вказати ширину і висоту за допомогою двох значень розділених пропуском. Перше значення встановить ширину фонового зображення, а друге значення його висоту. Важливо відзначити, що процентна запис пов'язана з розміром елемента, а не з вихідним розміром фонової картинки.
Отже, властивість background-size з шириною 100% встановить, що фонове зображення займає всю ширину елемента. Якщо друге значення не визначене після ширини, то значення висоти буде задано автоматично, щоб зберегти пропорції фонового зображення.
Ключове слово auto може бути задіяно в якості значення ширини або висоти, щоб зберегти пропорції фонового зображення. Так, якщо ми хочемо встановити висоту фонової картинки на 75% від висоти елемента при збереженні її пропорцій, то можемо поставити значення background-size як auto 75%.
div {background: url ( "shay.jpg") 0 0 no-repeat; background-size: auto 75%; border: 2px dashed # 9799a7; height: 240px; width: 200px; }
Демонстрація background-size
Ключові слова cover і contain
На додаток до розмірів властивість background-size також допускає ключові слова cover і contain.
Значення cover вказує, що фонове зображення буде змінено, щоб повністю закрити ширину і висоту елемента. Початкове співвідношення сторін фонової картинки буде збережено, поки зображення буде розтягуватися або стискатися в міру необхідності, щоб охопити елемент цілком. Часто при використанні значення cover частина фонового зображення обрізається, щоб зображення займало всю доступну площу елемента.
Ключове слово contain, з іншого боку, вказує, що фонове зображення буде змінено, щоб цілком вписується в ширину і висоту елемента. При цьому вихідне співвідношення сторін фонове зображення буде збережено, але картинка буде розтягуватися або стискатися в міру необхідності, щоб залишитися в межах ширини і висоти елемента. На відміну від cover, ключове слово contain завжди показує повне фонове зображення, при цьому часто воно не буде займати всю доступну площу елемента.
Значення cover і contain можуть привести до невеликих спотворень фонових зображень, особливо, коли картинка розтягується за межами своїх початкових розмірів. Ми повинні стежити за цим при використанні даних значень і переконатися, що стилі в результаті є придатними.
background-clip і background-origin
Властивість background-clip визначає площу поверхні, яку охоплює фонове зображення, а властивість background-origin визначає, звідки має починатися background-position. Впровадження цих двох нових властивостей пов'язано з впровадженням трьох нових значень: border-box, padding-box і content-box. Кожне з цих трьох значень може бути використано для властивостей background-clip і background-origin.
div {background: url ( "shay.jpg") 0 0 no-repeat; background-clip: padding-box; background-origin: border-box; }
Значення властивості background-clip за замовчуванням встановлюється як border-box, що дозволяє фонового зображення розширюватися в область кордонів. Тим часом, властивість background-origin за замовчуванням встановлюється як padding-box, що дозволяє фонового зображення починатися там же, де і padding у елемента.
Мал. 7.04. Значення border-box розширює фон до кордонів елемента
Мал. 7.05. Значення padding-box розширює фон до padding у елемента, але фон при цьому знаходиться всередині кордонів
Мал. 7.06. Значення content-box містить фон всередині padding і border у елемента
Ми вже обговорювали значення цих ключових слів, коли розглядали властивість box-sizing в уроці 4, "Відкриваємо блокову модель». Сенс самих значень не змінився, але їх функції змінюються при використанні різних властивостей фону.
резюме
Додавання фону і градієнтів на наші сторінки дозволяє нам розфарбувати фасад дизайну. Ці функції також допомагають визначити, як згрупований контент і поліпшити макет наших сторінок в цілому.
Коротко, в цьому уроці ми розглянули наступне:
- як додати колір фону і фонове зображення до елементів;
- лінійні і радіальні градієнти і їх налаштування;
- як задати кілька фонових зображень для одного елемента;
- нові властивості CSS3, які дозволяють змінювати розмір, площа поверхні і область позиціонування фонових зображень
Додавання кольору фону, градієнтів і зображень приносить чимало можливостей для поліпшення загального дизайну наших веб-сайтів. Незабаром ми обговоримо, як семантично додавати зображення (окремо від фонових зображень) для наших сторінок. Але перед цим давайте поглянемо на те, як семантично створювати списки.
Ресурси і посилання
Автор і редактори
Автор: Шей Хоу
Остання зміна: 11.08.2018
Редактори: Влад Мержевіч
