4.5.1 背景颜色

背景颜色是背景应用中最基础的属性，使用 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 所示：

从上图可以看出，元素的背景颜色延伸到了边框的下面，透过虚线边框的间隙，可以看到背景颜色。

不过，在CSS2中规定，背景颜色只延伸到内边距，而不是边框。在CSS2.1中，对此作了更正，并明确指出元素的背景是内容、内边距和边框区域的背景。所以，一些较老的浏览器可能会有不同的表现。

另外，考虑到浏览器的兼容性，如果使用RGBA、HSL和HSLA来定义背景颜色，一般会先定义一个十六进制颜色的背景作为对老浏览器的备用颜色，然后再定义RGBA、HSL和HSLA颜色的背景。