Колір та фон
Оновлено: 20.01.2023
Колір та фон
Властивості для зміни кольору і фону для веб-сторінки або окремих її елементів.
-
backdrop-filter
backdrop-filter
Дозволяє застосувати ефекти на кшталт розмиття до області фонового малюнка, розташованої за елементом. Щоб ефект став помітним, сам елемент має бути частково прозорим.
-
background
background
Універсальна властивість background дає змогу встановити одночасно кілька характеристик фону. Значення можуть іти в будь-якому порядку, браузер сам визначить, яке з них відповідає потрібній властивості. Для докладного ознайомлення дивіться інформацію про кожну властивість окремо. Припустимо, також, вказувати параметри одразу декількох фонів, перераховуючи їх через кому.
-
background-attachment
background-attachment
Властивість background-attachment встановлює, чи буде прокручуватися фонове зображення разом із вмістом елемента. Зображення може бути зафіксованим і залишатися нерухомим, або переміщатися спільно з документом. Можна вказати кілька значень для низки фонових зображень, перераховуючи значення через кому.
-
background-blend-mode
background-blend-mode
Визначає режим накладення фонового зображення на фоновий колір або інші фонові зображення. Припустимо вказувати кілька значень через кому, при цьому вони будуть застосовуватися до фонових зображень, перерахованих у background-image, у тому ж порядку.
-
background-clip
background-clip
Визначає, як колір фону або фонова картинка має виводитися під межами. Ефект помітний за прозорих або пунктирних кордонів.
-
background-color
background-color
Визначає колір фону елемента. Хоча ця властивість не успадковує властивості свого батьківського елемента, через те, що початкове значення встановлюється прозорим, колір фону дочірніх елементів збігається з кольором фону батьківського елемента.
-
background-image
background-image
Встановлює фонове зображення для елемента. Якщо одночасно для елемента задано колір фону, він буде показаний, поки фонова картинка не завантажиться повністю. Те саме станеться, якщо зображення не доступні або їхній показ у браузері вимкнено. У разі наявності в малюнку прозорих областей, через них буде проглядати фоновий колір. Припустимо вказувати кілька фонових зображень, перераховуючи їхні параметри через кому.
-
background-origin
background-origin
Властивість background-origin визначає область позиціонування фонового малюнка. Ця властивість не застосовується, коли значення background-attachment задано як fixed.
-
background-position
background-position
Задає початкове положення фонового зображення, встановленого за допомогою властивості background-image. Припустимо вказувати кілька значень для кожного фону, перераховуючи значення через кому.
-
background-position-x
background-position-x
Задає положення фонового зображення всередині елемента по горизонталі. Якщо для елемента встановлено кілька фонових зображень, то можна змінювати положення кожного зображення, перераховуючи значення через кому.
-
background-position-y
background-position-y
Задає положення фонового зображення всередині елемента по вертикалі. Якщо для елемента встановлено кілька фонових зображень, то можна змінювати положення кожного зображення, перераховуючи значення через кому.
-
background-repeat
background-repeat
Визначає, як повторюватиметься фонове зображення, встановлене за допомогою властивості background-image. Можна встановити повторення малюнка тільки по горизонталі, по вертикалі або в обидва боки. Припустимо вказувати кілька значень для кожного фону, перераховуючи значення через кому.
-
linear-gradient()
linear-gradient()
Функція linear-gradient() додає лінійний градієнт до фону елемента. Вона виступає значенням властивості background-image або background.
-
mix-blend-mode
mix-blend-mode
Визначає режим накладення вихідного кольору на фоновий колір або фонове зображення.
-
radial-gradient()
radial-gradient()
Функція radial-gradient() додає радіальний градієнт до фону елемента. Радіальні за своїм принципом схожі на лінійні градієнти, але один колір переходить в інший не вздовж прямої лінії, а немов кола по воді навколо точки.
-
repeating-linear-gradient()
repeating-linear-gradient()
Створює нескінченно повторюваний лінійний градієнт, утворюючи тим самим фоновий візерунок. За своєю дією схожа на функцію linear-gradient() і має ті самі параметри. При цьому кольори послідовно змінюють один одного, після останнього кольору в списку кольорів градієнта відразу ж іде перший.
-
repeating-radial-gradient()
repeating-radial-gradient()
За своєю дією схожий на радіальний градієнт, який робиться функцією radial-gradient(), і має з ним схожий синтаксис. Але кольори градієнта нескінченно повторюються в усіх напрямках, утворюючи візерунок, що заповнює фон елемента.