background-color

跳到:
  1. Summary
  2. 語法
  3. 範例
  4. 規格定義
  5. Browser compatibility
  6. 延伸閱讀

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

Summary

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

預設值transparent
Applies toall elements. It also applies to ::first-letter and ::first-line.
繼承與否no
Mediavisual
Computed valuecomputed color
Animation typea 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( <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;
}

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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 的文件。

延伸閱讀

文件標籤與貢獻者

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