background-color属性用于指定元素的背景颜色。在CSS 中，它为背景容器设置纯色，这里的纯色指的是非渐变色。
语法
语法如下：
background-color: 颜色值;说明
其中颜色值可以为如下几种方式：
- 系统定义的颜色名
- HEX（十六进制）
- rgb()/rgba()
- hsl()/hsla()
- transparent
1. 系统定义的颜色名，如我们常用的red，white，green等。
2. 十六进制比如黑色背景 background: #000000; 可以通过一些取色工具查看十六进制。
3. rgb是三个颜色值，比如黑色背景 background:rgb(255,255,255;);同样的可以通过一些取色工具查看rgb；而对于rgba和rgb一样，只不过他有4个参数，多了一个参数，其中多了的表示不透明度，我们可以通过rgab设置css透明度。
4. hsl()/hsla()。hsl() 是按照人类对颜色认知的习惯来生成的一种颜色表示法，H 表示色相，其值的范围是0~360，S 表示饱和度，其值范围是0~100%，L 表示亮度，其值范围是0~100%。色相就是纯色，其中
- 0/360表示红色
- 60表示黄色
- 120表示绿色
- 180表示青色
- 240表示蓝色
- 300表示品红色（紫色）
和rgba() 相似，hsla() 中的a 是Alpha 通道，表示不透明度,值为0到1。
5. transparent。transparent 表示透明色，其相当于把rgba() 或hsla() 中的a值设置成0，也就是说背景色完全透明。
5. transparent。transparent 表示透明色，其相当于把rgba() 或hsla() 中的a值设置成0，也就是说背景色完全透明。
以上系统定义的颜色名、十六进制和rgb可以通过在线工具查看更加直观。
例子
介绍上面几种方式的例子如下：
<!DOCTYPE html>
<html>
<title>css background-color属性例子</title>
<head>
<style>
div{float:left; margin-left:10px; width:80px;height:50px;}
.color1{background-color:orange;}
.color2{background-color:#b0d4de;}
.color3{background-color:rgb(220,220,220);}
.color4{background-color: hsl(120,30%,24%);}
.color5{background-color:transparent;}
</style>
</head>
<body>
<div class="color1">系统名</div>
<div class="color2">16进制</div>
<div class="color3">rgb</div>
<div class="color4">hsl</div>
<div class="color5">透明</div>
</body>
</html>