Свойства цвета фона CSS

Последнее обновление 8 мая 2019 12:16:43 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Свойства цвета фона

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

Синтаксис:

 цвет фона: цвет | прозрачный | унаследовать

Ценности

цвет : цвет может быть указан как допустимое ключевое слово (например, красный, бирюзовый), шестнадцатеричное значение или значение RGB.

прозрачный : если установлен, сам элемент не имеет какого-либо цвета. Это показывает цвет элемента позади. Это начальное значение свойства background-color.

наследовать : если установлено, связанный элемент принимает вычисленное значение свойства background-color своего родительского элемента.

Относится к

Свойство background-color можно применять ко всем элементам HTML.

наследование

Если значение не указано, свойство background-color не получает вычисленное значение его родительского элемента.

Процентное соотношение

Недоступен.

Средства массовой информации

визуальный.

Расчетное значение

Как указано.

Совместимость браузера

браузер	Версия
Internet Explorer	4.0 и выше
Firefox (Геккон)	1.0 и выше
опера	3.5 и выше
Safari (WebKit)	1.0 и выше

Пример свойства background-color когда value = "color"

Код CSS:

.firstline {background-color:#EFFFFF }
.secondline {background-color:#FFF6CF }
.thirdline {background-color:#FFEFEF }

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-color property when value="color" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-color-property-when-value-color.css">
</head>
<body>
<p class="firstline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="secondline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="thirdline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

Посмотреть этот пример в отдельном окне браузера

Пример свойства background-color когда value = "color".

Пример свойства background-color когда value = "transparent"

Код CSS:

 body  {background-color:#EFFFFF }
p {background-color: transparent}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-color property when value="transparent" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-color-property-when-value-transparent.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

Посмотреть этот пример в отдельном окне браузера

Пример свойства background-color, когда value = "transparent".

Пример свойства background-color когда значение = "унаследовать"

Код CSS:

 body  {background-color:#EFFFFF }
p {background-color: inherit}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-color property when value="inherit" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-color-property-when-value-inherit.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

Посмотреть этот пример в отдельном окне браузера

Пример свойства background-color когда значение = "унаследовать".

Смотрите также

Предыдущая: свойства фона CSS
Далее: CSS свойство background-image