背景颜色是背景应用中最基础的属性，使用 background-color属性，几乎可以为任何元素定义背景颜色，该属性不能被继承，其默认值是 transparent，即透明背景。也就是说，如果一个元素没有显式定义背景颜色，那么其背景是透明的，就可以透过该元素看到其祖先元素的背景。
background-color属性接受任意合法的CSS颜色值，如预定义的颜色名、十六进制数值、RGB值、RGB百分比、RGBA值、HSL值、HSLA值。如：
h1 { background-color: gray; } /* 灰色背景 */h2 { background-color: #ccc; } /* 灰色背景 */p { background-color: rgba(0,152,50,0.7); } /* 70%不透明度的背景 */div { background-color: transparent; } /* 完全透明背景 */
默认情况下，元素的背景颜色会延伸边框的外边界。因此，对于间断的边框，如虚线或点线，元素的背景会出现在边框的可见部分。如：
div {width: 200px;height: 60px;border: 10px dashed #444;background-color: rgba(0,152,50,0.7);}
上述代码的运行结果如图 4‑24 所示：
图4-24 background-color效果
从上图可以看出，元素的背景颜色延伸到了边框的下面，透过虚线边框的间隙，可以看到背景颜色。
不过，在CSS2中规定，背景颜色只延伸到内边距，而不是边框。在CSS2.1中，对此作了更正，并明确指出元素的背景是内容、内边距和边框区域的背景。所以，一些较老的浏览器可能会有不同的表现。
另外，考虑到浏览器的兼容性，如果使用RGBA、HSL和HSLA来定义背景颜色，一般会先定义一个十六进制颜色的背景作为对老浏览器的备用颜色，然后再定义RGBA、HSL和HSLA颜色的背景。