В чем разница между свойствами background-color и background?

Разница между background-color и background

Основные определения

background-color - это свойство CSS, которое устанавливает цвет фона элемента.

background - это shorthand свойство (сокращенное свойство), которое может устанавливать сразу все фоновые свойства.

background-color

background-color устанавливает ТОЛЬКО цвет фона:

.element {
  background-color: blue;
  background-color: #FF5733;
  background-color: rgba(255, 0, 0, 0.5);
  background-color: hsl(120, 100%, 50%);
  background-color: transparent;
}

Значения:

• Именованный цвет: red, blue, white и т.д.
• Hex: #FF5733, #f57
• RGB/RGBA: rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
• HSL/HSLA: hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5)
• transparent - прозрачный фон
• currentColor - использует цвет текста

Пример:

<style>
  .box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
  }
</style>

<div class="box">Текст на синем фоне</div>

background (shorthand)

background - это сокращенное свойство, которое может устанавливать сразу все фоновые свойства:

1. background-color - цвет фона
2. background-image - картинка фона
3. background-repeat - повтор картинки
4. background-attachment - прикрепление (fixed/scroll)
5. background-position - позиция картинки
6. background-size - размер картинки
7. background-clip - область отсечения
8. background-origin - точка отсчета

/* Полный синтаксис */
background: [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip] [background-color];

/* Примеры */
background: blue; /* Только цвет */
background: url('bg.jpg'); /* Только картинка */
background: url('bg.jpg') center / cover no-repeat; /* Картинка с параметрами */
background: linear-gradient(to right, red, blue); /* Градиент */
background: red url('pattern.png') repeat-x fixed top left; /* Полный набор */

Сравнение

/* background-color - ТОЛЬКО цвет */
.element1 {
  background-color: blue;
}

/* background - может быть всё */
.element2 {
  background: blue; /* Эквивалентно background-color */
}

.element3 {
  background: url('bg.jpg') center / cover no-repeat;
  /* Это эквивалентно: */
  /* background-image: url('bg.jpg'); */
  /* background-position: center; */
  /* background-size: cover; */
  /* background-repeat: no-repeat; */
}

Практические примеры

Пример 1: Простой цвет фона

/* Оба способа работают одинаково */
.box1 {
  background-color: #FF5733;
}

.box2 {
  background: #FF5733;
}

Пример 2: Картинка фона

/* background-color не может это сделать */
.box1 {
  background-color: url('bg.jpg'); /* НЕПРАВИЛЬНО! */
}

/* Нужно использовать background */
.box2 {
  background: url('bg.jpg');
}

/* Или несколько свойств вместе */
.box3 {
  background: url('bg.jpg') center / cover no-repeat;
}

Пример 3: Градиент

/* gradient - это тоже фоновое изображение */
.box1 {
  background: linear-gradient(to right, red, blue);
}

.box2 {
  background: radial-gradient(circle, yellow, green);
}

Пример 4: Комбинация картинки и цвета

/* Если картинка не загрузилась, покажется цвет */
.box {
  background: url('bg.jpg') center / cover no-repeat lightgray;
  /* background-color: lightgray; - это fallback цвет */
}

Каскадирование и переопределение

Важно: При использовании shorthand свойства background, оно переопределяет ВСЕ фоновые свойства!

.element {
  background-color: red;
  background-image: url('bg.jpg');
  background-repeat: repeat-x;

  /* Это переопределит ВСЁ выше! */
  background: blue;
  /* Теперь:
     - background-color: blue
     - background-image: none
     - background-repeat: repeat
  */
}

Правильный порядок:

/* НЕПРАВИЛЬНО - background переопределит background-color */
.box1 {
  background: blue;
  background-color: red; /* Это не сработает, будет синий */
}

/* ПРАВИЛЬНО */
.box2 {
  background-color: red;
  background-image: url('pattern.png');
}

/* ИЛИ */
.box3 {
  background: url('pattern.png') red;
}

Когда что использовать?

Используй background-color когда:

• Нужен только цвет фона
• Хочешь явно указать, что ты устанавливаешь цвет
• Работаешь с переопределением стилей
• Хочешь избежать переопределения других фоновых свойств

/* Явно - только цвет */
.button {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
}

Используй background когда:

• Устанавливаешь несколько фоновых свойств сразу
• Используешь картинки, градиенты
• Хочешь более компактный код

/* Компактно - картинка с параметрами */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
              url('hero.jpg') center / cover no-repeat;
  height: 500px;
}

Производительность

Оба свойства имеют одинаковую производительность. Разница только в удобстве использования:

/* Оба работают одинаково быстро */
.efficient1 { background-color: red; }
.efficient2 { background: red; }

/* Но это более читаемо */
.efficient3 {
  background: linear-gradient(to right, red, blue) center / cover no-repeat;
}

Особенности с наследованием

/* background НЕ наследуется */
.parent {
  background: blue;
}

.child {
  /* Фон будет белым (по умолчанию), не синим */
}

/* Если нужно - нужно явно установить */
.child {
  background: inherit; /* Наследует от родителя */
}

Заключение

• background-color - устанавливает ТОЛЬКО цвет
• background - shorthand для всех фоновых свойств (цвет, картинка, размер, позиция и т.д.)
• background переопределяет все фоновые свойства
• Используй background-color когда нужен только цвет
• Используй background когда нужны картинки, градиенты или несколько свойств
• Оба имеют одинаковую производительность