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