当前位置：文江博客知识库简体中文文档 Web CSS background-color

background-color - CSS（层叠样式表）编辑

概览

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

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

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;
}

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 background-color	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) 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!

Desktop
Mobile

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