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 上開源。