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

構文

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

/* Hexadecimal value */
background-color: #bbff00;    /* 不透過 */
background-color: #11ffee00;  /* 完全透過 */
background-color: #11ffeeff;  /* 不透過 */

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

/* HSL 値 */
background-color: hsl(50, 33%, 25%);         /* 不透過 */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% 不透過 */

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

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

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

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

形式文法

<color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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

.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153,102,153);
  color: rgb(255,255,204);
}

.examplethree {
  background-color: #777799;
  color: #FFFFFF;
}

結果

アクセシビリティの考慮事項

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

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

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
background-color の定義
勧告候補 形式上は transparent キーワードが削除されたが、 <color> の正規の値として組み入れられたため、変更なし。
CSS Level 2 (Revision 1)
background-color の定義
勧告 変更なし
CSS Level 1
background-color の定義
勧告 初回定義

初期値transparent
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承なし
メディア視覚
計算値色の計算値
アニメーションの種類
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4
補足
完全対応 4
補足
補足 In Internet Explorer 8 and 9, there is a bug where a computed background-color of transparent causes click events to not get fired on overlaid elements.
Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Alpha channel for hex values
実験的
Chrome 完全対応 52Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 52Chrome Android 完全対応 52Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

最終更新者: mfuji09,