Цвет фона

Для того чтобы задать цвет фона какого либо элемента или всего HTML-документа в CSS предусмотрено свойство background-color параметрами которого являются цвета, в формате шестнадцатеричного кода, форматов RGB, RGBA, HSL, HSLA и других стандартных значений.
background-color: black;
background-color: #006699;
background-color: rgb(249, 201, 16);
background-color: rgba(163, 110, 29, 0.8);
background-color: hsl(212, 56%, 31%);
background-color: hsla(129, 60%, 19%, 0.8);
background-color: transparent;
background-color: inherit;
black
– имя цвета.
#006699
– Шестнадцатеричный код.
При такой записи формата цвета перед числами обязательно ставится решетка #
. Запись так же можно делать сокращённой – #069
.
rgb (249, 201, 16)
– Аддитивное смешение цветов.
Аббревиатура RGB
расшифровывается как: Red
, Green
, Blue
, что в переводе с английского означает – красный, зелёный, синий. Цифры, записанные в скобках через запятую, указывают на величину цветового потока ( в данном случае 249
единиц – красный, 201
– зелёный, 16
– синий ).
rgba(163, 110, 29, 0.8)
– Аддитивное смешение цветов с добавленным альфа-каналом регулирующим прозрачность.
Аббревиатура RGBA
расшифровывается как: Red
, Green
, Blue
, Alpha
. Все параметры кроме прозрачности аналогичны RGB
. При выборе значения прозрачности равным 0.5
, элемент становится полупрозрачным, 0
делает объект полностью прозрачным, а 1
отменяет прозрачность.
hsl(212, 56%, 31%)
– формат HSL
– Hue
(оттенок), Saturation
(насыщенность), Lightness
(осветление). Значение 212
– оттенок в градусах ( 0
– 360
), 56%
– насыщенность, 31%
– осветление.
hsla(129, 60%, 19%, 0.8)
– формат цвета HSLA
– Hue
, Saturation
, Lightness
, Alpha
(альфа-канал). Цветовое значение в формате HSLA
аналогично HSL
, но с добавлением регулировки прозрачности как в RGBA
.
transparent
– прозрачный фон.
inherit
– наследование.

HTML
<div class="four-columns">
<div class="column">
<div class="box white">
white
</div>
</div>
<div class="column">
<div class="box silver">
silver
</div>
</div>
<div class="column">
<div class="box gray hue">
gray
</div>
</div>
<div class="column">
<div class="box black hue">
black
</div>
</div>
</div>
CSS
.four-columns{
overflow: hidden;
}
.four-columns .column {
width: 25%;
float: left;
}
.box{
width: 140px;
font-size: 22px;
font-weight: bold;
line-height: 50px;
margin: 20px auto;
text-align: center;
}
.hue{
color: rgba(255, 255, 255, 0.9);
}
.white{
background-color: white;
}
.silver{
background-color: silver;
}
.gray{
background-color: gray;
}
.black{
background-color: black;
}