background-color — цвет фона | CSS справочник
Поддержка браузерами
| 12.0+ | 4.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство background-color устанавливает цвет фона для элемента. Фон охватывает общий размер элемента, включая внутренние отступы и рамки (не распространяясь на внешний отступ — margin).
Обратите внимание, что по умолчанию фон не наследуется от родительского элемента, однако дочерние элементы, благодаря прозрачности своего фона (задано по умолчанию), будут содержать часть фона родительского элемента.
Цвет фона можно установить различными способами, к примеру: указать имя цвета, использовать шестнадцатеричные значения или с помощью синтаксиса RGB, как именно это сделать, вы можете увидеть в примере ниже, где показано применение различных способов задания цвета фона.
Примечание: если добавить свойство background-color к тегу <body>, цвет заполнит все окно браузера. Однако если так же добавить цвет фона для тега <html>, то фон элемента <body> будет заполнять только область с содержимым, если оно есть.
Совет: вместо монотонного цвета, в качестве фона, можно использовать любое изображение, для этого стоит воспользоваться свойством background-image. Так же стоит обратить внимание на свойство background-clip, используемое для определения области в элементе, на которую будет распространяться фон.
| Значение по умолчанию: | transparent |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | да |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object. style.backgroundColor=»#00FF00″ |
Синтаксис
background-color: цвет|transparent|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| цвет | |
| transparent | Указывает, что фон будет прозрачным. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
background-color:
red
blue
#000000
#ff9900
rgb(255,255,255)
rgb(255,130,255)
transparent
div {
border-style: solid;
border-bottom-width: thin;
}
html — Изменение цвета фона и ширины элемента body
спросил
Изменено 6 лет, 8 месяцев назад
Просмотрено 2к раз
Я пытаюсь установить фон для элемента body .
Я изменил ширину корпуса
корпус {
граница: 1px сплошной черный;
ширина: 500 пикселей;
поле: 0 авто;
фон: черный;
} - HTML
- CSS
- фон
1
Вы на самом деле делаете это, за исключением случаев, когда вы не объявляете цвет фона для элемента html , тогда он принимает цвет фона корпус элемент. Следовательно, вы не видите разницы.
Просто задайте элементу html другой цвет фона, а также задайте body some height
html {
цвет фона: красный; /* новый */
}
тело {
граница: 1px сплошной черный;
ширина: 500 пикселей;
высота: 500 пикселей; /* новый */
поле: 0 авто;
фон: черный;
} Понимание связи между html , body и background-color .
Начальный фоновый цвет для всех элементов: прозрачный .
Если background-color элемента html не указан (т. е. Transparent ), то по правилам CSS браузер присваивает ему body .
Из спецификации:
3.11.2. Фон холста и HTML
ЭлементДля документов, корневым элементом которых является элемент HTML
HTMLили XHTMLЭлемент html: если вычисленное значениеbackground-imageна корневой элементnoneи его фоновый цветпрозрачный, пользовательские агенты должны вместо этого распространять вычисленные значения фоновые свойства из первого HTML 9 этого элемента0011 ТЕЛО или XHTMLтелодочерний элемент. Используемые значения этого элементафоновые свойства — это их начальные значения, а распространяемые значения обрабатываются так, как если бы они были указаны в корневом элементе.BODY Это рекомендуется, чтобы авторы HTML-документов указывали холст фон для элемента
BODY, а не для элементаHTML.
5
Зарегистрируйтесь или войдите в систему
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Html Цвет фона тела с примерами кода
В этом уроке мы попытаемся решить головоломку Html Body Background Color с помощью компьютерного языка.
Следующий код служит иллюстрацией этого момента.
<тело>
