この翻訳は不完全です。英語から この記事を翻訳 してください。

概要

background-color CSS プロパティは、色の値、あるいは transparent キーワードで要素の背景色を設定する CSS プロパティです。

初期値transparent
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承不可
メディアvisual
計算値半透明の値なら、計算値はそれに対応する rgba()。さもなくばその値に対応する rgb()。transparent キーワードは rgba(0,0,0,0) にマップされます。
アニメーションの可否可。 の値として補完しますcolor
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* Keyword values */
background-color: red;

/* Hexadecimal value */
background-color: #bbff00;

/* RGB value */
background-color: rgb(255, 255, 128);

/* HSLA value */
background-color: hsla(50, 33%, 25%, 0.75);

/* Special keyword values */
background-color: currentColor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

値

<color>
背景の均等色 (uniform color) を表す CSS <color>。1つまたは複数の background-image が定義されている場合でも、ここで指定した背景色は背景画像の透過部分のレンダリングに影響を与えます。CSS では、transparent は色です。

形式文法

<color>
where 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

例

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;
}

Result

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
background-color の定義		 勧告候補 Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true <color>
CSS Level 2 (Revision 1)
background-color の定義		 勧告 変更点なし
CSS Level 1
background-color の定義		 勧告  

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 (1.7 or earlier) 1.0 4.0 [1] 3.5 1.0 (85)
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 (1.9.2) (有) (有) (有) (有)

[1]: In IE8-9, there is a bug where a computed background-color of transparent causes click events to not get fired on overlaid elements. See the click event documentation for details.

関連情報

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

タグ: 
 このページの貢献者: Sebastianz, teoli, SphinxKnight, mitsuba-clover, ethertank, maco81, Yuichiro, ijokarumawak
 最終更新者: Sebastianz,