この翻訳は不完全です。英語から この記事を翻訳 してください。
概要
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 | WindowTextwhere
<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.