Клавиша / esc

background-color

Свойство, раскрашивающее фон элемента в яркие краски!

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

Кратко

Скопировано

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

Пример

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

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

<div class="inline-block">Английское слово blue...</div>

        
        
          
        
      
        
          
          .block {  background-color: rgb(244, 152, 173);}.inline {  background-color: yellow;}.inline-block {  background-color: #2E9AFF;}
          .block {
  background-color: rgb(244, 152, 173);
}

.inline {
  background-color: yellow;
}

.inline-block {
  background-color: #2E9AFF;
}

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

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

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

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

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

Как понять

Скопировано

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

Как пишется

Скопировано

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

Чёрный:

        
          
          .element {  background-color: black;}
          .element {
  background-color: black;
}

        
        
          
        
      

Белый:

        
          
          .element {  background-color: #ffffff;}
          .element {
  background-color: #ffffff;
}

        
        
          
        
      

Белый полупрозрачный:

        
          
          .element {  background-color: #ffffff80;}
          .element {
  background-color: #ffffff80;
}

        
        
          
        
      

Жёлтый полупрозрачный:

        
          
          .element {  background-color: rgb(255 255 0 / 0.5);}
          .element {
  background-color: rgb(255 255 0 / 0.5);
}

        
        
          
        
      

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

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

Подсказки

Скопировано

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

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

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

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

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

На практике

Скопировано

Алёна Батицкая советует

Скопировано

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

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

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

        
        
          
        
      
        
          
          .form {  /* Фон для всей формы */  background-color: #18191C;}.input {  /* Прозрачное поле ввода */  background-color: transparent;}.button {  /* Чёрный фон для кнопки */  background-color: #2E9AFF;}.button:hover {  /* Белый фон при наведении курсора */  background-color: #FFFFFF;}
          .form {
  /* Фон для всей формы */
  background-color: #18191C;
}

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

.button {
  /* Чёрный фон для кнопки */
  background-color: #2E9AFF;
}

.button:hover {
  /* Белый фон при наведении курсора */
  background-color: #FFFFFF;
}

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

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

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

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

        
        
          
        
      
        
          
          .bkg {  background-color: #F498AD;  /* Тень для каждой строки, перекрывающая пробел */  box-shadow: 0 4px 0 #F498AD;}
          .bkg {
  background-color: #F498AD;
  /* Тень для каждой строки, перекрывающая пробел */
  box-shadow: 0 4px 0 #F498AD;
}

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

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

        
          
          <header>  <h1>The best site all over the world!</h1></header>
          <header>
  <h1>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 можно задать любую картинку фоном, и поверх неё всегда будет голубой оверлей 💁‍♀️