MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

翻譯不完整。請協助 翻譯此英文文件

Summary

background-color CSS property 是用來設定HTML元素的背景顏色,值可以是顏色亦可以是特定關鍵字-- transparent.

預設值transparent
Applies toall elements. It also applies to ::first-letter and ::first-line.
繼承與否no
Mediavisual
Computed valueIf 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).
Animatableyes, as a color
Canonical orderthe 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 | 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

規格定義

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 發生在計算 transparentbackground-color 時,該 bug 是因為在被覆蓋的元素上的 click 事件並未啟動。詳細可參考click event 的文件

延伸閱讀

文件標籤與貢獻者

 此頁面的貢獻者: Sebastianz, SphinxKnight, Shiyou
 最近更新: Sebastianz,