属性中的 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
事件不会被重叠元素触发