Кожен елемент в дереві документа - просто прямокутна коробка. Кожна з цих коробок має фон, який може бути повністю прозорим, кольоровим або зображенням. І цей бекграунд контролюється 8 властивостями CSS (плюс 1 коротка властивість).
background-color
Властивість background-color встановлює колір фону для елементу. Її змінна може бути або змінною кольору, або ключовим словом transparent.
.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }
{full-post-img}
Колір фону відображається в області моделі, яка визначається як властивість background-clip. Якщо є фонове зображення, то шар з кольором відображається під цим зображенням. На відміну від шарів з зображеннями, яких може бути багато, ми можемо мати тільки один кольоровий шар для елемента.
background-image
Властивість background-image визначає фонове зображення (або багато зображень) для елемента. Її значення зазвичай являє собою URL до потрібного зображення, з нотацією url(). Також можна використовувати значення none, яке буде враховуватися в якості порожнього шару.
.left { background-image: url('ire.png'); }
.right { background-image: none; }
{full-post-img}
Ми також можемо вказати кілька фонових зображень через кому. Кожне наступне зображення відображається за попереднім на осі z.
.middle {
background-image: url('khaled.png'), url('ire.png');
/* Інші стилі */
background-repeat: no-repeat;
background-size: 100px;
}
{full-post-img}
background-repeat
Властивість background-repeat регулює кількість повторів фонового зображення після оголошення його розміру (через властивість background-size) і його положення (через властивість background-position).
Значення цієї властивості може бути одним з наступних ключових слів repeat-x, repeat-y, repeat, space, round, no-repeat. До того ж після перших двох (repeat-x і repeat-y), інші значення можуть бути оголошені один раз, для осі х і осі у, або для кожного простору окремо.
.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
.top-outer-right { background-repeat: space; }
.bottom-outer-left { background-repeat: round; }
.bottom-inner-left { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }
{full-post-img}
background-size
Властивість background-size визначає розмір фонового зображення. Це значення може бути ключовим слово, довжиною, або відсотком.
Ключові слова, доступні для цієї властивості - contain і cover. Ключове слово contain буде масштабувати зображення до найбільшого можливого розміру, в якому і його висота і ширина можуть поміститися в межах. cover, з іншого боку, буде масштабувати зображення до мінімально можливого розміру, в якому вся область фону ще покрита.
.left {
background-size: contain;
background-image: url('ire.png');
background-repeat: no-repeat;
}
.right { background-size: cover; /* Інші стилі такі ж самі як в .left */ }
{full-post-img}
Зі значеннями довжини і значеннями у відсотках, ми можемо визначити як ширину, так і висоту фонового зображення. Значення у відсотках вираховуються відповідно з розміром елементу.
.left { background-size: 50px; /* Інші стилі такі ж самі як в .left */ }
.right { background-size: 50% 80%; /* Інші стилі такі ж самі як в .left */ }
{full-post-img}
background-attachment
Властивість background-attachment відповідає за те, як фонове зображення прокручується відносно вікна та елемента. Вона має три можливих значення.
Ключове слово fixed означає, що фонове зображення фіксується на вікні і не рухається, навіть коли користувач прокручує уздовж. local означає, що фон повинен бути закріплений на його положенні в елементі. Якщо елемент має механізм прокрутки і фонове зображення знаходиться зверху, то якщо користувач буде прокручувати вниз елемент, фонове зображення буде рухатися вгору. І, нарешті, scroll означає, що фонове зображення є фіксованим і не прокручується.
.left {
background-attachment: fixed;
background-size: 50%;
background-image: url('ire.png');
background-repeat: no-repeat;
overflow: scroll;
}
.middle { background-attachment: local; /* Інші стилі такі ж самі як в .left */ }
.right { background-attachment: scroll; /* Інші стилі такі ж самі як в .left */ }
{full-post-img}
background-position
Ця властивість, в поєднанні з властивістю background-origin, визначає, де повинно бути початкове положення для фонового зображення. Її значення може бути ключовим словом, довжиною, або відсотком, і ми можемо вказати положення уздовж осі х і осі у.
Ключові слова, які нам доступні - top, right, bottom, left, і center. Ми можемо використовувати ці ключові слова в будь-якій комбінації, і якщо вказано тільки одне ключове слово, то друге автоматично є center.
.top-left {
background-position: top;
background-size: 50%;
background-image: url('ire.png');
background-repeat: no-repeat;
}
.top-middle { background-position: right; /* Інші стилі такі ж самі як в .top-left */ }
.top-right { background-position: bottom; /* Інші стилі такі ж самі як в .top-left */ }
.bottom-left { background-position: left; /* Інші стилі такі ж самі як в .top-left */ }
.bottom-right { background-position: center; /* Інші стилі такі ж самі як в .top-left */ }
{full-post-img}
Для значень довжини і відсотку, ми можемо також вказати положення уздовж осі x і осі y. Процентні значення встановлюються відносно елементу.
.left { background-position: 20px 70px; /* Інші стилі такі ж самі як в .top-left */ }
.right { background-position: 50%; /* Інші стилі такі ж самі як в .top-left */ }
{full-post-img}
background-origin
Властивість background-origin визначає, в залежності від якої області моделі коробки позиціонується фонове зображення.
Із доступних значень border-box, яке позиціонує зображення в області рамки (Border Area), padding-box, яке використовує область заповнення (Padding Area), і content-box, яке використовує область контенту (Content Area).
.left {
background-origin: border-box;
background-size: 50%;
background-image: url('ire.png');
background-repeat: no-repeat;
background-position: top left;
border: 10px dotted black;
padding: 20px;
}
.middle { background-origin: padding-box; /* Інші стилі такі ж самі як в .left*/ }
.right { background-origin: content-box; /* Інші стилі такі ж самі як в .left*/ }
{full-post-img}
background-clip
Властивість background-clip визначає область відображення фону. Як власність background-origin, вона базується на області моделі.
.left{
background-clip: border-box;
background-size: 50%;
background-color: #ffdb3a;
background-repeat: no-repeat;
background-position: top left;
border: 10px dotted black;
padding: 20px;
}
.middle { background-clip: padding-box; /* Інші стилі такі ж самі як в .left*/ }
.right { background-clip: content-box; /* Інші стилі такі ж самі як в .left*/ }
{full-post-img}
background
І, нарешті, властивість background є узагальнюючою для інших властивостей, пов'язаних з фоном. Порядок підвластивостей не має значення, так як типи даних для кожної з них різні. Проте, для background-origin і background-clip, якщо вказана тільки одна область моделі, то це буде використовуватись для обох властивостей. Якщо вказано дві, то перша визначає background-origin.
Ще немає коментарів