CSS-背景颜色 | background-color

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

上一篇:CSS-背景附件 | background-attachment


下一篇:CSS-背景裁剪 | background-clip