background-color - CSS

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> 用來表示一致的背景顏色。即便設定了一個或多個 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	原始定義。

預設值	`transparent`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
繼承與否	no
Computed value	computed color
Animation type	a color

Browser compatibility

BCD tables only load in the browser