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

背景颜色 | 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;

语法

background-color属性被指定为单个值。

值

是描述背景的统一颜色的CSS 。即使background-image定义了一个或几个，如果图像不透明，透明度也会影响渲染效果。在CSS中，transparent是一种颜色。

正式语法

where 
 =  |  |  |  |  |  | currentcolor | 
where 
 = rgb( [ [ {3} | {3} ] [ /  ]? ] | [ [ #{3} | #{3} ] , ? ] )
 = rgba( [ [ {3} | {3} ] [ /  ]? ] | [ [ #{3} | #{3} ] , ? ] )
 = hsl( [  [ /  ]? ] | [ , , , ? ] )
 = hsla( [  [ /  ]? ] | [ , , , ? ] )
where 
 =  |  =  | 

示例

HTML

 Lorem ipsum dolor sit amet, consectetuer



  Lorem ipsum dolor sit amet, consectetuer



  Lorem ipsum dolor sit amet, consectetuer

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

结果

规范

浏览器兼容性

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