`background-color`

Время чтения: меньше 5 мин

Кратко

При помощи свойства background-color можно задать цвет фона элемента. Задать фоновый цвет можно любому элементу — строчному (inline), блочному (block) или строчно-блочному (inline-block).

Пример

        
          
          <div class="parent">  <p class="block">Розовый — цвет, образующийся...</p>  <span class="inline">Жёлтый — самый лёгкий и яркий цвет...</span>  <div class="inline-block">Зелёный цвет...</div></div>
          <div class="parent">
  <p class="block">Розовый — цвет, образующийся...</p>

  <span class="inline">Жёлтый — самый лёгкий и яркий цвет...</span>

  <div class="inline-block">Зелёный цвет...</div>
</div>

        
          
          .parent {  line-height: 1.5;}.block {  background-color: pink;}.inline {  background-color: rgb(255, 216, 41);}.inline-block {  display: inline-block;  margin-top: 15px;  background-color: #49a16c;}
          .parent {
  line-height: 1.5;
}

.block {
  background-color: pink;
}

.inline {
  background-color: rgb(255, 216, 41);
}

.inline-block {
  display: inline-block;
  margin-top: 15px;
  background-color: #49a16c;
}

Открыть демо в новой вкладке

В примере выше показаны блоки всех трёх типов отображения. С фоном для блочных и строчно-блочных элементов проблем не возникает, а вот со строчными элементами всё не так просто.

Если высота строки (line-height) у строчного элемента будет больше 1, то между строками будут пробелы.

Но в заливке фона строчных элементов есть и преимущества! На последней строке фон заканчивается ровно там, где заканчивается текст.

Помимо этой особенности, в CSS-коде видно, что в качестве значения для background-color можно использовать любое доступное обозначение цвета в вебе.

Как это понять

Свойство background-color меняет цвет фона любого элемента.

Как пишется

Для нужного селектора указываем свойства background-color и после двоеточия указываем цвет фона в любом доступном для веба формате.

        
          
          selector {  /* Чёрный */  background-color: black;  /* Белый */  background-color: #ffffff;  /* Белый полупрозрачный */  background-color: #ffffff80;  /* Жёлтый */  background-color: rgb(255, 255, 0);  /* Жёлтый полупрозрачный */  background-color: rgb(255 255 0 / 0.5);  /* Полупрозрачный чёрный */  background-color: rgba(0, 0, 0, 0.5);  /* Полупрозрачный чёрный — другой вариант */  background-color: rgba(0 0 0 / 0.5);}
          selector {
  /* Чёрный */
  background-color: black;
  /* Белый */
  background-color: #ffffff;
  /* Белый полупрозрачный */
  background-color: #ffffff80;
  /* Жёлтый */
  background-color: rgb(255, 255, 0);
  /* Жёлтый полупрозрачный */
  background-color: rgb(255 255 0 / 0.5);
  /* Полупрозрачный чёрный */
  background-color: rgba(0, 0, 0, 0.5);
  /* Полупрозрачный чёрный — другой вариант */
  background-color: rgba(0 0 0 / 0.5);
}

Помимо цвета можно задать прозрачный фон при помощи ключевого слова transparent.

Это бывает полезно для изменения цвета при наведении курсора.

Подсказки

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

💡 Значение по умолчанию — прозрачный фон: transparent

💡 Фон нельзя задать частично. Блок заливается указанным цветом полностью.

💡 В качестве значения можно указать только один цвет.

💡 Изменение цвета фона можно анимировать при помощи свойства transition 🥳

На практике

Алёна Батицкая

🛠 Если нужна красивая кнопка (<button>), то не забудьте сбросить фон: укажите для неё background-color: transparent. Или тот цвет фона, который нужен по дизайну. По умолчанию у всех кнопок серый фон с приветом из девяностых.

🛠 Аналогичным способом можно сделать красивые прозрачные поля ввода (input) в формах.

        
          
          <form class="form">  <label>    Email:    <input class="input" type="text" placeholder="Введите ваш email">  </label>  <button class="submit">Подписаться</button></form>
          <form class="form">
  <label>
    Email:
    <input class="input" type="text" placeholder="Введите ваш email">
  </label>
  <button class="submit">Подписаться</button>
</form>

        
          
          .form {  /* Фон для всей формы */  background-color: #ffd829;}.input {  /* Прозрачное поле ввода */  background-color: transparent;}.submit {  /* Чёрный фон для кнопки */  background-color: black;  /* Анимируем всё анимируемое */  transition: 0.3s ease-in-out;}.submit:hover {  /* Прозрачный фон при наведении курсора */  background-color: transparent;}
          .form {
  /* Фон для всей формы */
  background-color: #ffd829;
}

.input {
  /* Прозрачное поле ввода */
  background-color: transparent;
}

.submit {
  /* Чёрный фон для кнопки */
  background-color: black;
  /* Анимируем всё анимируемое */
  transition: 0.3s ease-in-out;
}

.submit:hover {
  /* Прозрачный фон при наведении курсора */
  background-color: transparent;
}

Открыть демо в новой вкладке

🛠 Если вам нужен градиент, то background-color вам не подойдёт. Градиенты можно задать только при помощи background-image.

🛠 Если нужен блок с «рваным» краем, но без пробела между строками, то для этого есть множество трюков. Один из них:

        
          
          <div class="parent">  Чем отличается маркер от текстовыделителя?  <span class="bkg">    Текстовыделительные маркеры заправляются флуоресцентными полупрозрачными    чернилами. Они не покрывают поверхность бумаги плотным слоем, не    пропускающим свет, как это делают обычные маркеры на водной или спиртовой    основе.  </span></div>
          <div class="parent">
  Чем отличается маркер от текстовыделителя?
  <span class="bkg">
    Текстовыделительные маркеры заправляются флуоресцентными полупрозрачными
    чернилами. Они не покрывают поверхность бумаги плотным слоем, не
    пропускающим свет, как это делают обычные маркеры на водной или спиртовой
    основе.
  </span>
</div>

        
          
          .parent {  padding: 25px;}.bkg {  font-size: 16px;  line-height: 1.5;  background-color: #ffd829;  /* Тень для каждой строки, перекрывающая пробел */  box-shadow: 0 6px 0 #ffd829;}
          .parent {
  padding: 25px;
}

.bkg {
  font-size: 16px;
  line-height: 1.5;
  background-color: #ffd829;
  /* Тень для каждой строки, перекрывающая пробел */
  box-shadow: 0 6px 0 #ffd829;
}

Открыть демо в новой вкладке

🛠 С помощью полупрозрачного фонового цвета у псевдоэлемента можно создать красивый оверлей поверх фотографий или фоновых изображений. Это круто, потому что фоном можно будет ставить любую фотографию, и она в большинстве случаев не будет выбиваться из дизайна.

        
          
          <header class="header">  <h1 class="title">The best site all over the world!</h1></header>
          <header class="header">
  <h1 class="title">The best site all over the world!</h1>
</header>

        
          
          .header {  /* Чтобы псевдоэлемент считал  своё положение от этого блока */  position: relative;  z-index: 0;  /* Фоновое изображение  на всю ширину и высоту блока */  background: url("background.png") no-repeat center / cover;}.header:before {  content: "";  position: absolute;  z-index: -1;  display: block;  top: 0;  left: 0;  width: 100%;  height: 100%;  /* Оверлей поверх картинки с прозрачностью 50% */  background-color: rgba(0, 79, 130, 0.5);}
          .header {
  /* Чтобы псевдоэлемент считал
  своё положение от этого блока */
  position: relative;
  z-index: 0;
  /* Фоновое изображение
  на всю ширину и высоту блока */
  background: url("background.png") no-repeat center / cover;
}

.header:before {
  content: "";
  position: absolute;
  z-index: -1;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Оверлей поверх картинки с прозрачностью 50% */
  background-color: rgba(0, 79, 130, 0.5);
}

Открыть демо в новой вкладке

Для .header можно задать любую картинку фоном, и поверх неё всегда будет голубой оверлей 💁‍♀️