Властивості Background

7 хв. читання

Кожен елемент в дереві документа - просто прямокутна коробка. Кожна з цих коробок має фон, який може бути повністю прозорим, кольоровим або зображенням. І цей бекграунд контролюється 8 властивостями CSS (плюс 1 коротка властивість).

background-color

Властивість background-color встановлює колір фону для елементу. Її змінна може бути або змінною кольору, або ключовим словом transparent.

.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }

background properties {full-post-img}

Колір фону відображається в області моделі, яка визначається як властивість background-clip. Якщо є фонове зображення, то шар з кольором відображається під цим зображенням. На відміну від шарів з зображеннями, яких може бути багато, ми можемо мати тільки один кольоровий шар для елемента.

background-image

Властивість background-image визначає фонове зображення (або багато зображень) для елемента. Її значення зазвичай являє собою URL до потрібного зображення, з нотацією url(). Також можна використовувати значення none, яке буде враховуватися в якості порожнього шару.

.left { background-image: url('ire.png'); }
.right { background-image: none; }

background properties {full-post-img}

Ми також можемо вказати кілька фонових зображень через кому. Кожне наступне зображення відображається за попереднім на осі z.

.middle { 
  background-image: url('khaled.png'), url('ire.png');

  /* Інші стилі */
  background-repeat: no-repeat; 
  background-size: 100px;
}

background properties {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; }

background properties {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 */ }

background properties {full-post-img}

Зі значеннями довжини і значеннями у відсотках, ми можемо визначити як ширину, так і висоту фонового зображення. Значення у відсотках вираховуються відповідно з розміром елементу.

.left { background-size: 50px; /* Інші стилі такі ж самі як в .left */ }
.right { background-size: 50% 80%; /* Інші стилі такі ж самі як в .left */ }

background properties {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 */ }

background properties {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 */ }

background properties {full-post-img}

Для значень довжини і відсотку, ми можемо також вказати положення уздовж осі x і осі y. Процентні значення встановлюються відносно елементу.

.left { background-position: 20px 70px; /* Інші стилі такі ж самі як в .top-left */ }
.right { background-position: 50%; /* Інші стилі такі ж самі як в .top-left */ }

background properties {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*/ }

background properties {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*/ }

background properties {full-post-img}

background

І, нарешті, властивість background є узагальнюючою для інших властивостей, пов'язаних з фоном. Порядок підвластивостей не має значення, так як типи даних для кожної з них різні. Проте, для background-origin і background-clip, якщо вказана тільки одна область моделі, то це буде використовуватись для обох властивостей. Якщо вказано дві, то перша визначає background-origin.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.8K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація