翻譯不完整。請協助 翻譯此英文文件。
Summary
background-color CSS property 是用來設定HTML元素的背景顏色，值可以是顏色亦可以是特定關鍵字－－ transparent.
| 預設值 | transparent |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| 繼承與否 | no |
| Media | visual |
| Computed value | If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0). |
| Animatable | yes, as a color |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
語法
background-color: red; background-color: rgb(255, 255, 128); background-color: hsla(50, 33%, 25%, 0.75); background-color: currentColor; background-color: transparent; background-color: #bbff00; background-color: inherit;
參數
<color>- 一個 CSS
<color>用來表示一致的背景顏色。即便設定了一個或多個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
規格定義
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 The definition of 'background-color' in that specification. |
Candidate Recommendation | 技術上來說，移除了 transparent 關鍵字，但實際上並未發生任何改變，因為它被列入至正式的 <color> |
| CSS Level 2 (Revision 1) The definition of 'background-color' in that specification. |
Recommendation | 無變動 |
| CSS Level 1 The definition of 'background-color' in that specification. |
Recommendation | 原始定義。 |
Browser compatibility
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 (1.7 or earlier) | 1.0 | 4.0 [1] | 3.5 | 1.0 (85) |
| Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 1.0 (1.9.2) | (Yes) | (Yes) | (Yes) | (Yes) |
[1]: 在 IE8-9 有個 bug 發生在計算 transparent 的 background-color 時，該 bug 是因為在被覆蓋的元素上的 click 事件並未啟動。詳細可參考click event 的文件。