background-color

概览

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 | WindowText
where 
<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.

查看更多

文档标签和贡献者