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 是一種顏色

正式語法

background-color = 
  <color>  

<color> = 
  <absolute-color-base>  | (en-US)
  currentcolor           | (en-US)
  <system-color>         | (en-US)
  <device-cmyk()>        

<absolute-color-base> = 
  <hex-color> (en-US)    | (en-US)
  <named-color>  | (en-US)
  transparent    | (en-US)
  <rgb()>        | (en-US)
  <rgba()>       | (en-US)
  <hsl()>        | (en-US)
  <hsla()>       | (en-US)
  <hwb()>        | (en-US)
  <lab()>        | (en-US)
  <lch()>        | (en-US)
  <oklab()>      | (en-US)
  <oklch()>      | (en-US)
  <color()>      

<device-cmyk()> = 
  device-cmyk( <cmyk-component>{4} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) )  

<rgb()> = 
  rgb( [ (en-US) <percentage> (en-US) | (en-US) none ] (en-US){3} (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  | (en-US)
  rgb( [ (en-US) <number> (en-US) | (en-US) none ] (en-US){3} (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<hsl()> = 
  hsl( [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) <percentage> (en-US) | (en-US) none ] (en-US) [ (en-US) <percentage> (en-US) | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<hwb()> = 
  hwb( [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) <percentage> (en-US) | (en-US) none ] (en-US) [ (en-US) <percentage> (en-US) | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<lab()> = 
  lab( [ (en-US) <percentage> (en-US) | (en-US) <number> (en-US) | (en-US) none ] (en-US) [ (en-US) <percentage> (en-US) | (en-US) <number> (en-US) | (en-US) none ] (en-US) [ (en-US) <percentage> (en-US) | (en-US) <number> (en-US) | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<lch()> = 
  lch( [ (en-US) <percentage> (en-US) | (en-US) <number> (en-US) | (en-US) none ] (en-US) [ (en-US) <percentage> (en-US) | (en-US) <number> (en-US) | (en-US) none ] (en-US) [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<oklab()> = 
  oklab( [ (en-US) <percentage> (en-US) | (en-US) <number> (en-US) | (en-US) none ] (en-US) [ (en-US) <percentage> (en-US) | (en-US) <number> (en-US) | (en-US) none ] (en-US) [ (en-US) <percentage> (en-US) | (en-US) <number> (en-US) | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<oklch()> = 
  oklch( [ (en-US) <percentage> (en-US) | (en-US) <number> (en-US) | (en-US) none ] (en-US) [ (en-US) <percentage> (en-US) | (en-US) <number> (en-US) | (en-US) none ] (en-US) [ (en-US) <hue> | (en-US) none ] (en-US) [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<color()> = 
  color( <colorspace-params> [ (en-US) / [ (en-US) <alpha-value> | (en-US) none ] (en-US) ] (en-US)? (en-US) )  

<cmyk-component> = 
  <number> (en-US)      | (en-US)
  <percentage> (en-US)  

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

<hue> = 
  <number> (en-US)  | (en-US)
  <angle> (en-US)   | (en-US)
  none      

<colorspace-params> = 
  <predefined-rgb-params>  | (en-US)
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ (en-US) <number> (en-US) | (en-US) <percentage> (en-US) | (en-US) none ] (en-US){3} (en-US)  

<xyz-params> = 
  <xyz-space> [ (en-US) <number> (en-US) | (en-US) none ] (en-US){3} (en-US)  

<predefined-rgb> = 
  srgb          | (en-US)
  srgb-linear   | (en-US)
  display-p3    | (en-US)
  a98-rgb       | (en-US)
  prophoto-rgb  | (en-US)
  rec2020       

<xyz-space> = 
  xyz      | (en-US)
  xyz-d50  | (en-US)
  xyz-d65

範例

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
CSS Backgrounds and Borders Module Level 4 # background-color

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

Browser compatibility

BCD tables only load in the browser