CSS 中文开发手册

背景颜色 | background-color (Backgrounds & Borders) - CSS 中文开发手册

CSS属性中的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;

适用元素

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

初始值	transparent

语法

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

结果

规范

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

Specification	Status	Comment

浏览器兼容性

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	Chrome	Edge	Firefox	Internet Explorer	Opera	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

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari

在Internet Explorer 8和9中，存在一个错误，即计算background-color的transparent会使得click事件不会被重叠元素触发

CSS 中文开发手册

本文标题：背景颜色 | background-color (Backgrounds & Borders) – CSS 中文开发手册 - Break易站转载请保留页面地址：https://www.breakyizhan.com/css/32255.html