CSS приклад: background-color

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Коротка інформація

Значення за замовчуваннямпрозорий
НаслідуєтьсяНі
ЗастосовуєтьсяДо всіх елементів
Відсотковий записНе застосовується
Посилання на специфікаціюhttp://www.w3.org/TR/CSS21/colors.html#propdef-background-color

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Визначає колір фону елемента. Хоча це властивість не успадковує властивість свого батька, через те, що початкове значення встановлюється прозорим, колір фону дочірніх елементів збігається з коліром фону батьківського елемента.

Синтаксис

background-color: <колір> | прозорий | успадковано

Значення

Див. колір

прозорий
Встановлює прозорий фон.
успадковано
Успадковує значення батька.

Приклад

HTML5CSS2.1IECrOpSaFx

<!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: білий; /* Колір тексту */
   }
  </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>

У цьому прикладі для елементів веб-сторінки застосовуються три різних способи задання фонового кольору. Результат прикладу показаний на малюнку 1.

Малюнок 1. Застосування background-color

Об'єктна модель

[window.]document.getElementById("ідентифікатор елемента").style.backgroundColor

Браузери

Internet Explorer до версії 7.0 включно не підтримує значення успадковано.

Часті запитання

  • Q: Як використовувати background-color в CSS?

    A: Властивість background-color в CSS використовується для встановлення кольору фону елемента.

  • Q: Як встановити background-color для елемента в CSS?

    A: Для встановлення background-color для елемента в CSS використовується властивість background-color, наприклад: div { background-color: blue; }.

  • Q: Як задати прозорість для background-color в CSS?

    A: Для задання прозорості для background-color використовується значення RGBA, наприклад: div { background-color: rgba(255, 0, 0, 0.5); }.

  • Q: Як використовувати background-color для body в CSS?

    A: Для встановлення background-color для тіла документа в CSS можна використати селектор body, наприклад: body { background-color: #f0f0f0; }.

  • Q: Як використовувати background-color для різних станів елемента в CSS?

    A: Для встановлення background-color для різних станів елемента, таких як hover або active, можна використати псевдокласи, наприклад: a:hover { background-color: yellow; }.