Атрибут background-color в CSS

9 червня 2022 р.1914

Зміст

Визначає колір фону елемента. Хоча ця властивість не успадковує властивості свого батька через те, що початкове значення встановлюється прозорим, колір фону дочірніх елементів збігається з кольором фону батьківського елемента.

Коротка інформація

Значення за замовчуванням	transparent
Наслідує	Ні
Застосовується	До всіх елементів
Анімується	Так

Синтаксис

<code>background-color: <коле т> | transparent

Позначення

	Опис	Приклад
<тип>	Вказує тип значення.	<розмір>
A && B	Значення повинні виводитися в зазначеному порядку.	<розмір> && <колір>
A \| B	Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).	normal \| small-caps
A \|\| B	Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.	width \|\| count
[ ]	Групує значення.	[ crop \|\| cross ]
*	Повторювати нуль або більше разів.	[,<час>]*
+	Повторювати один або більше разів.	<число>+
?	Вказаний тип, слово або група не є обов'язковим.	inset?
{A, B}	Повторювати не менше A, але не більше B разів.	<радіус>{1,4}
#	Повторювати один або більше разів через кому.	<час>#

Значення

Див. колір

transparent: Встановлює прозоре тло.

Пісочниця

-tablet is-6-desktop playground-values">

div { padding: 10px; background-color: <span class="playground-active">{{playgroundValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-color</title> <style> body{ background-color: #3366CC; /* Колір тла веб-сторінки */
} 
h1 { background-color: RGB(249, 201, 16); /* Колір тла під заголовком */
} 
p { background-color: maroon; /* Колір тла під текстом параграфа */
color: white; /* Колір тексту */
}
</style>
</head>
<body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt at lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>

У цьому прикладі для елементів веб-сторінки застосовується три різні способи завдання фонового кольору. Результат прикладу показано на рис. 1.

Застосування background-color

Мал. 1. Застосування background-color

Об'єктна модель

Об'єкт.style.backgroundColor

Специфікація

Специфікація	Статус
CSS Backgrounds and Borders Module Level 3	Можлива рекомендація
CSS Level 2 Revision 1 (CSS 2.1)	Рекомендація
CSS Level 1	Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

Recommendation ( Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери


4	12	1	3.5	1	1

table>

Браузери

У таблиці браузерів застосовуються такі позначення.

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

Число вказує версію браузера, починаючи з якої властивість підтримується.

"field field-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">

Колір та фон

Див. також

Фон у CSS

Рецепти

Практика

Колір по назві

Автор та редактори

Автор: Влад Мержевич

Останнє змінення: 29.02.2020

Редактори: Влад Мержевич


1	1	6	1