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 のプロパティで、要素の背景色を設定します。
試してみましょう
構文
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: 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>
例
HTML
html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>
<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>
<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
CSS
css
.exampleone {
background-color: transparent;
}
.exampletwo {
background-color: rgb(153 102 153);
color: rgb(255 255 204);
}
.examplethree {
background-color: #777799;
color: #ffffff;
}
結果
仕様書
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # background-color |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 複数の背景
<color>
データ型- その他の色に関するプロパティ:
color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
,column-rule-color
- CSS を使用した HTML の要素への色の適用