background-color

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

語法

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> (en-US) 用來表示一致的背景顏色。即便設定了一個或多個 background-image (en-US) ,背景渲染上依舊會渲染這顏色,若是圖片並非不透明圖,在透明區域就能看見。在 CSS 中, transparent 是一種顏色

正式語法

<color> (en-US)

where
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> (en-US) | (en-US) currentcolor | (en-US) <deprecated-system-color> (en-US)

where
<rgb()> = rgb( <percentage> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number> (en-US){ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number> (en-US)# (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> (en-US) <percentage> (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage> (en-US), <percentage> (en-US), <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> (en-US) <percentage> (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage> (en-US), <percentage> (en-US), <alpha-value>? (en-US) )

where
<alpha-value> = <number> (en-US) | (en-US) <percentage> (en-US)
<hue> = <number> (en-US) | (en-US) <angle> (en-US)

範例

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> (en-US)
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 原始定義。

預設值transparent
Applies toall elements. It also applies to ::first-letter and ::first-line (en-US).
繼承與否no
Computed value (en-US)computed color
Animation typea color

Browser compatibility

BCD tables only load in the browser

延伸閱讀