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>
用來表示一致的背景顏色。即便設定了一個或多個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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.