CSS Background - Фон
Властивості фону CSS використовуються для визначення фонових ефектів для елементів.
В цих розділах ви дізнаєтесь про наступні властивості фону CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
CSS background-color - Колір фону
Властивість background-color визначає колір фону елементу.
Приклад
Колір фону сторінки встановлюється наступним чином:
body {
background-color: lightblue;
}
Спробуйте самі »
В CSS колір частіше всього задається:
- допустима назва кольору - наприклад "red"
- значення HEX - наприклад "#ff0000"
- значення RGB - наприклад "rgb(255,0,0)"
Перегляньте CSS Значення кольору для отримання повного списку можливих значень кольору.
Інші елементи
Ви можете встановити колір фону для будь-яких HTML-елементів:
Приклад
Тут <h1>, <p> та <div> елементи будуть мати різні кольори фону:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Спробуйте самі »
Opacity / Transparency - Непрозорість / Прозорість
Властивість opacity визначає непрозорість / прозорість елементу. Може приймати значення від 0,0 до 1,0. Чим менше значення, тим прозоріше:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Примітка: При використанні властивості opacity для додавання прозорості до фону елемента всі його дочірні елементи наслідують ту саму прозорість. Це може ускладнити читання тексту всередині повністю прозорого елементу.
Прозорість з використанням RGBA
Якщо ви не хочете застосувати прозорість до дочірніх елементів, як в прикладі вище, використовуйте значення кольору RGBA. В наступному прикладі встановлюється непрозорість кольору фону, а не тексту:
100% opacity
60% opacity
30% opacity
10% opacity
Із розділу CSS Кольори ви дізнались, що можна використовувати RGB в якості значення кольору. В додаток до RGB ви можете використовувати значення кольору RGB з каналом alpha (RGBA), який вказує непрозорість кольору.
Значення кольору RGBA задається за допомогою: rgba(red, green, blue, alpha). Параметр alpha - це число від 0,0 (повністю прозорий) до 1,0 (повністю непрозорий).
Порада: Ви дізнаєтесь більше про кольори RGBA в розділі CSS Кольори на нашому сайті W3Schools українською.
