background-color

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	computed color
Animation type	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( <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!

Desktop
Mobile

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