background-color属性用于设置元素的背景颜色。它通过值来设置元素的背景色。

一个元素可以有一个或多个背景图像，background-color属性可以在所有背景图像下面绘制背色。如果设置了背景图像，但是图像是无效的图片，那么就会在元素上显示指定的背景色。

元素背景色的剪裁方式和最底层的背景图像的裁剪方式相同。关于背景剪裁属性的详细信息，你可以参考属性。

当你在背景图像上设置了一些文字的时候，你要确保这些文字的颜色和背景颜色不同。否则在背景图像失效的时候，这些文字就会变得不可见了。

官方语法

background-color: <color>                              
                            

参数：

background-color属性的参数是CSS的一种数据类型，用于指定一种背景颜色。即使你设置了一个或多个背景图像，指定的背景颜色仍然会被渲染。当背景图像不是透明的时候，背景颜色会被透明处理。在CSS中透明（transparent）是一种颜色。

background-color属性的初始值是transparent。

例如下面的代码为元素设置元素的背景颜色为黑色和文字颜色为白色：

div { 
    background-color: #000;
    color: white;
}                               
                            

也可以通过rgb()、hsl()、rgba()或hsla()函数来设置背景色。

.element-1 { 
    background-color: rgb(252, 35, 68);
}
.element-2 { 
    background-color: rgb(252, 35, 68, .5);
}
.element-3 { 
    background-color: hsl(250, 30%, 50%);
}  
.element-4 { 
    background-color: hsl(250, 30%, 50%, .8);
}                              
                            

适用范围

background-color属性可以使用在所有元素上。

在线演示

下面的DEMO分别为元素设置不同的背景颜色和文字颜色：

下面的例子中使用一张透明的png图片作为背景图片，并设置了一个背景颜色。由于图片的尺寸不足以覆盖整个元素，所以背景颜色是可见的。

浏览器支持

所有的现代浏览器都支持颜色属性。包括：Chrome, Firefox, Safari, Opera, IE 和 Android 和 iOS。