① Базовый цвет: свойство background-color

Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.

Свойства фона не наследуются, но фон родительского блока будет просвечивать по умолчанию из-за начального значения в background-color: transparent.

Фон не отображается у пустых элементов с нулевой высотой. Отрицательные значения свойства margin не влияют на фон элемента.

Содержание:

1. Базовый цвет: свойство background-color

2. Источник изображения: свойство background-image

3. Укладка изображений: свойство background-repeat

4. Фиксация изображения: свойство background-attachment

5. Позиционирование изображений: свойство background-position

6. Область рисования: свойство background-clip

7. Область расположения фона: свойство background-origin

8. Размер изображений: свойство background-size

9. Краткая запись свойств фона: свойство background

10. Множественные фоны

Базовый цвет: свойство background-color

Свойство background-color устанавливает цвет фона элемента. Цвет рисуется за фоновыми изображениями. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.

Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.

Свойство не наследуется.

background-color

Значения:

цвет - Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent.
initial - Устанавливает значение свойства в значение по умолчанию.
inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

background-color: salmon;
background-color: #00ff00;
background-color: rgba(255, 128, 128, 0.5);
background-color: currentColor;
background-color: transparent;
background-color: inherit;
background-color: initial;

📷 Рис. 1. Свойство background-color для разных элементов

Продолжение в следующей статье!