background-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

background-color は CSS のプロパティで、要素の背景色を設定します。

試してみましょう

background-color: brown;

background-color: #74992e;

background-color: rgb(255, 255, 128);

background-color: rgba(255, 255, 128, 0.5);

background-color: hsl(50, 33%, 25%);

background-color: hsla(50, 33%, 25%, 0.75);

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

構文

css
/* キーワード値 */
background-color: red;
background-color: indigo;

/* 16 進の値 */
background-color: #bbff00; /* 完全不透過 */
background-color: #bf0; /* 完全不透過の短縮形 */
background-color: #11ffee00; /* 完全透過 */
background-color: #1fe0; /* 完全透過の短縮形 */
background-color: #11ffeeff; /* 完全不透過 */
background-color: #1fef; /* 完全不透過の短縮形 */

/* RGB 値 */
background-color: rgb(255 255 128); /* 不透過 */
background-color: rgba(117 190 218 / 50%); /* 50% 不透過 */

/* HSL 値 */
background-color: hsl(50 33% 25%); /* 不透過 */
background-color: hsl(50 33% 25% / 75%); /* 75% 不透過、すなわち 25% 透過 */

/* 特殊なキーワード値 */
background-color: currentcolor;
background-color: transparent;

/* グローバル値 */
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: revert-layer;
background-color: unset;

background-color プロパティは単一の <color> 値で指定します。

値

<color>

背景の単一色 (uniform color) を表します。指定されていれば background-image の背後に描画されますが、画像に透明な部分があれば色が見えます。

アクセシビリティ

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが重要です。

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

公式定義

初期値transparent
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承なし
計算値色の計算値
アニメーションの種類色

形式文法

background-color = 
  <color>

例

ボックスへの色付け

この例では、さまざまな CSS の <color> 値を使用して、 HTML の <div> 要素に background-color を適用する方法を示しています。

HTML

html
<div class="example-one">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="example-two">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="example-three">Lorem ipsum dolor sit amet, consectetuer</div>

CSS

css
.example-one {
  background-color: transparent;
}

.example-two {
  background-color: rgb(153 102 153);
  color: rgb(255 255 204);
}

.example-three {
  background-color: #777799;
  color: #ffffff;
}

結果

表への色付け

この例では、 background-color を HTML の <table> 要素（<tr> の行や <td> のセルを含む）に使用する方法を示しています。

HTML

html
<table>
  <tr id="r1">
    <td id="c11">11</td>
    <td id="c12">12</td>
    <td id="c13">13</td>
  </tr>
  <tr id="r2">
    <td id="c21">21</td>
    <td id="c22">22</td>
    <td id="c23">23</td>
  </tr>
  <tr id="r3">
    <td id="c31">31</td>
    <td id="c32">32</td>
    <td id="c33">33</td>
  </tr>
</table>

CSS

css
table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}
td {
  border: solid 1px black;
}
#r1 {
  background-color: lightblue;
}
#c12 {
  background-color: cyan;
}
#r2 {
  background-color: grey;
}
#r3 {
  background-color: olive;
}

結果

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# background-color

ブラウザーの互換性

関連情報