翻译正在进行中。

概览

CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一.

初始值transparent
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性
适用媒体visual
计算值computed color
Animation typea 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;
background-color 属性只能使用 <color> 值。

取值

<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

规范

规范 状态 注释
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 初始定义

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 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.

查看更多

文档标签和贡献者

最后编辑者: litmonw,