Исполняемые доки CSS: Цвет фона

Q: Как изменить цвет фона в HTML?

Используйте свойство CSS background-color. Для всей страницы: body { background-color: #f3f4f6; }. Для одного элемента: .

Q: Валиден ли еще bgcolor в HTML?

Нет. Атрибут bgcolor у , и в HTML5 устарел. Браузеры все еще рисуют его для старых страниц, но правильный способ это background-color в CSS.

Q: Как сделать цвет фона прозрачным?

Используйте цвет с альфа-каналом, например background-color: rgb(37 99 235 / 20%);. В отличие от opacity, текст внутри остается полностью видимым.

Q: Чем background отличается от background-color?

background-color задает только цвет. background это сокращенная запись для всех свойств фона (цвет, изображение, позиция, размер, повтор, прикрепление, origin и clip), поэтому background: red; заодно сбрасывает фоновое изображение в none.

Q: Почему цвет фона body заливает все окно?

Когда у элемента нет собственного фона, браузер рисует фон body на всем холсте, даже за пределами блока body. Задайте фон html, если они должны различаться.

Цвет фона в CSS: background-color для страницы и элементов

background-color заливает блок элемента цветом. Разберем, как задать цвет фона всей страницы, div, строки таблицы или одного слова, как работает прозрачность, почему bgcolor устарел и чем background-color отличается от сокращенного свойства background.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Как задать цвет фона

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background color</title>
  <style>
    body { font-family: system-ui, sans-serif; background-color: #f3f4f6; }
    .card { background-color: #ffffff; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
    .notice { background-color: #fef3c7; padding: 12px 16px; }
    mark { background-color: #bbf7d0; }
  </style>
</head>
<body>
  <div class="card">A white card on a light gray page.</div>
  <div class="notice">An amber notice.</div>
  <p>A <mark>highlighted phrase</mark> inside a sentence.</p>
  <p><span style="background-color: #2563eb; color: white; padding: 2px 6px;">inline style</span></p>
</body>
</html>

Цвет страницы задан на body, карточка и уведомление на своих div, а выделение на строчном элементе. Строчные элементы получают фон только за своим текстом, строка за строкой.

Цвет фона всей страницы

Задайте background-color на body. Если у элемента <html> нет своего фона, браузер рисует фон body на все окно, даже там, где содержимое body заканчивается:

body {
  background-color: #111827;
  color: #f9fafb; /* change the text color too, for contrast */
}

Старый HTML-способ это <body bgcolor="black">. Атрибут bgcolor устарел на всех элементах, поэтому используйте CSS. Браузеры все еще учитывают его для старых страниц, и поэтому может показаться, что он работает.

Прозрачный фон

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transparent background</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600; padding: 12px;
      background: repeating-linear-gradient(45deg, #bfdbfe 0 12px, #ffffff 12px 24px);
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .none { background-color: transparent; border: 2px dashed #111827; }
    .tint { background-color: rgb(245 158 11 / 50%); }
    .solid { background-color: rgb(245 158 11); }
  </style>
</head>
<body>
  <div class="box none">transparent (the default)</div>
  <div class="box tint" id="tint">rgb(245 158 11 / 50%)</div>
  <div class="box solid">rgb(245 158 11)</div>
</body>
</html>

opacity: 0.5 тоже позволил бы видеть полосы, но заодно сделал бы бледным текст. Для полупрозрачного фона с непрозрачным текстом используйте цвет с альфой. Все способы его записать перечислены на странице про цвета.

Где рисуется цвет

По умолчанию фон доходит до внешнего края рамки (поэтому он виден сквозь пунктирную или полупрозрачную рамку). background-clip это меняет:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>background-clip</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box {
      display: inline-block; margin: 6px; padding: 16px;
      border: 8px dashed #111827;
      background-color: #f59e0b;
    }
    .padding { background-clip: padding-box; }
    .content { background-clip: content-box; }
  </style>
</head>
<body>
  <div class="box">border-box</div>
  <div class="box padding">padding-box</div>
  <div class="box content">content-box</div>
</body>
</html>

В первом блоке янтарный виден между штрихами. Во втором он останавливается на внутреннем крае рамки, а в третьем закрашена только область содержимого. Margin никогда не закрашивается: он всегда прозрачный.

Полосатые строки таблицы

Фон на каждой второй строке облегчает чтение широких таблиц:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped rows</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 8px 12px; text-align: start; }
    thead { background-color: #1f2937; color: white; }
    tbody tr:nth-child(even) { background-color: #f3f4f6; }
    tbody tr:hover { background-color: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Name</th><th>Role</th></tr></thead>
    <tbody>
      <tr><td>Ada</td><td>Engineer</td></tr>
      <tr><td>Grace</td><td>Admiral</td></tr>
      <tr><td>Alan</td><td>Mathematician</td></tr>
      <tr><td>Katherine</td><td>Physicist</td></tr>
    </tbody>
  </table>
</body>
</html>

background-color и сокращенное свойство background

background задает все свойства фона сразу. Любая часть, которую вы не указали, возвращается к значению по умолчанию, и на этом часто попадаются:

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background: #111827;          /* also resets background-image to none */
}

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background-color: #111827;    /* only the color; the gradient stays */
}

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

Доступность: в паре с цветом текста

Цвет фона читается только рядом с цветом текста. Задавая одно, проверяйте другое: WCAG требует коэффициент контрастности не меньше 4.5:1 для основного текста. Темному фону нужен явно заданный светлый текст, потому что текст сохраняет унаследованный темный цвет.

Частые ошибки

bgcolor. Он устарел. Используйте background-color.
opacity для полупрозрачного фона. Содержимое тоже бледнеет. Используйте цвет с альфой.
Сокращенная запись background после background-image. Она сбрасывает изображение. Пишите background-color.
Ожидание, что margin покажет цвет. Margin находится за пределами фона. Для цветного пространства используйте padding.
Темный фон с текстом по умолчанию. Задайте и светлый color.

Часто задаваемые вопросы

Как изменить цвет фона в HTML?

Используйте свойство CSS background-color. Для всей страницы: body { background-color: #f3f4f6; }. Для одного элемента: <div style="background-color: #fef3c7;">.

Валиден ли еще bgcolor в HTML?

Нет. Атрибут bgcolor у <body>, <table> и <td> в HTML5 устарел. Браузеры все еще рисуют его для старых страниц, но правильный способ это background-color в CSS.

Как сделать цвет фона прозрачным?

Используйте цвет с альфа-каналом, например background-color: rgb(37 99 235 / 20%);. В отличие от opacity, текст внутри остается полностью видимым.

Чем background отличается от background-color?

background-color задает только цвет. background это сокращенная запись для всех свойств фона (цвет, изображение, позиция, размер, повтор, прикрепление, origin и clip), поэтому background: red; заодно сбрасывает фоновое изображение в none.

Почему цвет фона body заливает все окно?

Когда у элемента <html> нет собственного фона, браузер рисует фон body на всем холсте, даже за пределами блока body. Задайте фон html, если они должны различаться.

Связанные концепции