卡卡網(wǎng)

今天在做一個實例時，偶爾發(fā)現(xiàn)background與background-color的的不同，于是研究了一下，總結(jié)出了它們的幾個不同之處。

background 與 background-color 相同之處

在介紹它們有哪些不同之處之前，我們應(yīng)該已經(jīng)知道，它們在設(shè)置純顏色時，是相同的，即是可以通用的，并且后者會覆蓋前者。例如：

background 與 background-color 不同之處

如果背景為非純顏色，那么 background 與 background-color 在使用上就有差異。

可以這樣理解，background 是 background-color 的縮寫，而背景顏色屬性實際上包括：

background-color  
background-image  
background-position  
background-repeat  
background-attachment  
background-clip  
background-origin  
background-size

因此，除了 background-color 之外，你還可使用其他 background-* 屬性。

圖片背景

假如先設(shè)置了 background 為一個圖片背景，其CSS代碼為：

background: url(images/image1.jpg);

那么你不能再使用 background-color 設(shè)置其背景顏色，如：

background-color: #cccccc;

但是你可以再使用 background 設(shè)置其背景顏色，覆蓋前面的設(shè)置，如：

background: #cccccc;

漸變背景

與圖片背景設(shè)置方法一樣，假如先設(shè)置了 background 為一個漸變背景，其CSS代碼為：

background: linear-gradient(90deg, #b828d1, transparent) #0085ff;

那么你不能再使用 background-color 設(shè)置其背景顏色，如：

background-color: #cccccc;

但是你可以再使用 background 設(shè)置其背景顏色，覆蓋前面的設(shè)置，如：

background: #cccccc;

結(jié)論

background 將取代所有以前的 background-color 、background-image等規(guī)范，它基本上是一個重置。

background 比 background-color 更高效

正如文章開頭說的那樣，純顏色時使用background和background-color的結(jié)果是一樣。但是從效率上來說是不同的，確切來說，純顏色使用background更高效。

下面是一個有趣的實驗。

比較 18 種顏色樣本在頁面上以小矩形呈現(xiàn) 100 次，一次使用background，一次使用background-color。

雖然這些數(shù)字來自單個頁面重新加載，但隨著后續(xù)刷新渲染時間發(fā)生了變化，但每次的百分比差異基本相同。

當(dāng)使用background而不是background-color時，在 Safari 7.0.1 中，這節(jié)省了近 42.6 毫秒，幾乎快了一倍。Chrome 33 似乎也差不多。

老實說，這讓我大吃一驚，因為最長的時間有兩個原因：

• 我通?？偸侵鲝?CSS 屬性的明確性，尤其是背景，因為它會對未來的特異性產(chǎn)生不利影響。
• 我認(rèn)為當(dāng)瀏覽器看到background: #000;時，它看到的是background: #000 none no-repeat top center;。

所以，堅持使用 background，是正確的選擇。

總結(jié)

本文詳細介紹了 background 與 background-color 有哪些異同之處，通過本文的學(xué)習(xí)，我們應(yīng)該知道如何更合理地去使用這兩個屬性。

相關(guān)文章

• 如何用CSS把背景分為2種顏色
• 【10個示例】了解CSS linear-gradient()背景顏色漸變

標(biāo)簽: background-color  background  背景顏色