这篇翻译不完整。请帮忙从英语翻译这篇文章。
概览
CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一.
| 初始值 | transparent |
|---|---|
| 适用元素 | all elements. It also applies to ::first-letter and ::first-line. |
| 是否是继承属性 | 否 |
| 适用媒体 | visual |
| 计算值 | If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0). |
| 是否适用于 CSS 动画 | yes, as a color |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
/* Keyword values */ background-color: red; /* Hexadecimal value */ background-color: #bbff00; /* RGB value */ background-color: rgb(255, 255, 128); /* 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;
取值
<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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowTextwhere
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
示例
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
规范
| 规范 | 状态 | 注释 |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 background-color |
Candidate Recommendation | Though technically removing thetransparentkeyword, this doesn't change anything as it has been incorporated as a true <color> |
| CSS Level 2 (Revision 1) background-color |
Recommendation | 没有变化 |
| CSS Level 1 background-color |
Recommendation | 初始定义 |
浏览器兼容性
| 特性 | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基础支持 | 1.0 (1.7 or earlier) | 1.0 | 4.0 [1] | 3.5 | 1.0 (85) |
| 特性 | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基础支持 | 1.0 (1.9.2) | (Yes) | (Yes) | (Yes) | (Yes) |
[1]: In IE8-9, there is a bug where a computed background-color of transparent causes click events to not get fired on overlaid elements. See the click event documentation for details.