background-color CSS

Свойство background-color определяет цвет фона элемента.

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

Свойство **`background-color`** определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.
Значение по умолчанию:

transparent

Значение по умолчанию:
`transparent`
Наследуется:
Нет
Применяется:

Ко всем элементам

Применяется:
Ко всем элементам
Анимируется:
Да
Объект JavaScript:

object.style.backgroundColor

Объект JavaScript:
`object.style.backgroundColor`
Спецификации:
Спецификации:
* [CSS Backgrounds and Borders Module Level 3](http://dev.w3.org/csswg/css3-background/#background-color) * [CSS Level 2 (Revision 1)](http://www.w3.org/TR/CSS2/colors.html#propdef-background-color) * [CSS Level 1](http://www.w3.org/TR/CSS1/#background-color)

Синтаксис

/* Keyword values */
background-color: red;

/* Hexadecimal value */
background-color: #bbff00;

/* Hexadecimal value with alpha channel */
background-color: #11ffee00; /* 00 - fully transparent */
background-color: #11ffeeff; /* ff - fully opaque */

/* RGB value */
background-color: rgb(255, 255, 128);

/* RGBA value or RGB with alpha channel */
background-color: rgba(117, 190, 218, 0.0); /* 0.0 - fully transparent */
background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */
background-color: rgba(117, 190, 218, 1.0); /* 1.0 - fully opaque */

/* HSLA value */
background-color: hsla(50, 33%, 25%, 0.75);

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

Синтаксис

/* Keyword values */ background-color: red; /* Hexadecimal value */ background-color: #bbff00; /* Hexadecimal value with alpha channel */ background-color: #11ffee00; /* 00 - fully transparent */ background-color: #11ffeeff; /* ff - fully opaque */ /* RGB value */ background-color: rgb(255, 255, 128); /* RGBA value or RGB with alpha channel */ background-color: rgba(117, 190, 218, 0.0); /* 0.0 - fully transparent */ background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */ background-color: rgba(117, 190, 218, 1.0); /* 1.0 - fully opaque */ /* HSLA value */ background-color: hsla(50, 33%, 25%, 0.75); /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset;

Значения

  • transparent — устанавливает прозрачный фон
  • любой цвет

Значения

* `transparent` -- устанавливает прозрачный фон * любой цвет

Примеры

<!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 ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

В данном примере для элементов веб-страницы применяется три различных способа задания фонового цвета.

Примеры

<!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 ut lacreet dolore magna aliguam erat volutpat.</p> </body> </html> В данном примере для элементов веб-страницы применяется три различных способа задания фонового цвета.

Содержание

  • Синтаксис
      /* Keyword values */ background-color: red; /* Hexadecimal value */ background-color: #bbff00; /* Hexadecimal value with alpha channel */ background-color: #11ffee00; /* 00 - fully transparent */ background-color: #11ffeeff; /* ff - fully opaque */ /* RGB value */ background-color: rgb(255, 255, 128); /* RGBA value or RGB with alpha channel */ background-color: rgba(117, 190, 218, 0.0); /* 0.0 - fully transparent */ background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */ background-color: rgba(117, 190, 218, 1.0); /* 1.0 - fully opaque */ /* HSLA value */ background-color: hsla(50, 33%, 25%, 0.75); /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset;
  • Значения
    • Примеры
        <!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 ut lacreet dolore magna aliguam erat volutpat.</p> </body> </html> В данном примере для элементов веб-страницы применяется три различных способа задания фонового цвета.

    В начало