属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一
/* Keyword values */ background-color: red; /* Hexadecimal value */ background-color: #bbff00; /* Hexadecimal value with alpha channel */ background-color: #11ffee00; /* 00 - fully transparent */ background-color: #11ffeeff; /* ff - fully opaque */ /* RGB value */ background-color: rgb(255, 255, 128); /* RGBA value or RGB with alpha channel */ background-color: rgba(117, 190, 218, 0.0); /* 0.0 - fully transparent */ background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */ background-color: rgba(117, 190, 218, 1.0); /* 1.0 - fully opaque */ /* HSLA value */ background-color: hsla(50, 33%, 25%, 0.75); /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset;
|
初始值 |
transparent |
|---|---|
|
适用元素 |
all elements. It also applies to ::first-letter and ::first-line. |
|
是否是继承属性 |
no |
|
适用媒体 |
visual |
|
计算值 |
computed color |
|
Animation type |
a color |
|
正规顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
background-color属性被指定为单个<color>值。
值
<color>是<color>描述背景的统一颜色的CSS 。即使background-image定义了一个或几个，如果图像不透明，透明度也会影响渲染效果。在CSS中，transparent是一种颜色。
正式语法
<color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color> where <rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] ) <rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] ) <hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] ) <hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <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; }
结果
规范
|
Specification |
Status |
Comment |
|---|---|---|
|
CSS Backgrounds and Borders Module Level 3The definition of 'background-color' in that specification. |
Candidate Recommendation |
Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true <color> |
|
CSS Level 2 (Revision 1)The definition of 'background-color' in that specification. |
Recommendation |
No change |
|
CSS Level 1The definition of 'background-color' in that specification. |
Recommendation |
Initial definition |
浏览器兼容性
|
Feature |
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
|---|---|---|---|---|---|---|
|
Basic Support |
1.0 |
12 |
1.0 |
4.01 |
3.5 |
1.0 |
|
Alpha channel for hex values |
52.0 |
No |
No |
No |
No |
No |
|
Feature |
Android |
Chrome for Android |
Edge mobile |
Firefox for Android |
IE mobile |
Opera Android |
iOS Safari |
|---|---|---|---|---|---|---|---|
|
Basic Support |
(Yes) |
(Yes) |
(Yes) |
1.0 |
(Yes) |
(Yes) |
(Yes) |
|
Alpha channel for hex values |
52.0 |
52.0 |
No |
No |
No |
No |
No |
在Internet Explorer 8和9中，存在一个错误，即计算background-color的transparent会使得click事件不会被重叠元素触发
