CSS 背景颜色 background-color属性

背景颜色是背景应用中最基础的属性，使用 background-color属性，几乎可以为任何元素定义背景颜色，该属性不能被继承，其默认值是 transparent，即透明背景。也就是说，如果一个元素没有显式定义背景颜色，那么其背景是透明的，就可以透过该元素看到其祖先元素的背景。

background-color属性接受任意合法的CSS颜色值，如预定义的颜色名、十六进制数值、RGB值、RGB百分比、RGBA值、HSL值、HSLA值。如：

1. h1 { background-color: gray; } /* 灰色背景 */
2. h2 { background-color: #ccc; } /* 灰色背景 */
3. p { background-color: rgba(0,152,50,0.7); } /* 70%不透明度的背景 */
4. div { background-color: transparent; } /* 完全透明背景 */

默认情况下，元素的背景颜色会延伸边框的外边界。因此，对于间断的边框，如虚线或点线，元素的背景会出现在边框的可见部分。如：

1. div {
2. width: 200px;
3. height: 60px;
4. border: 10px dashed #444;
5. background-color: rgba(0,152,50,0.7);
6. }

上述代码的运行结果如图 4‑24 所示：

图4-24 background-color效果

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

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

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

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。