|
|
|
|
|
|
CSS background與background-color的幾個不同之處
作者:admin 時間:2022-8-4 10:40:40 瀏覽:今天在做一個實例時，偶爾發現background與background-color的的不同，于是研究了一下，總結出了它們的幾個不同之處。
background 與 background-color 相同之處
在介紹它們有哪些不同之處之前，我們應該已經知道，它們在設置純顏色時，是相同的，即是可以通用的，并且后者會覆蓋前者。例如：
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-* 屬性。
圖片背景
假如先設置了 background 為一個圖片背景，其CSS代碼為：
background: url(images/image1.jpg);
那么你不能再使用 background-color 設置其背景顏色，如：
background-color: #cccccc;
但是你可以再使用 background 設置其背景顏色，覆蓋前面的設置，如：
background: #cccccc;
漸變背景
與圖片背景設置方法一樣，假如先設置了 background 為一個漸變背景，其CSS代碼為：
background: linear-gradient(90deg, #b828d1, transparent) #0085ff;
那么你不能再使用 background-color 設置其背景顏色，如：
background-color: #cccccc;
但是你可以再使用 background 設置其背景顏色，覆蓋前面的設置，如：
background: #cccccc;
結論
background 將取代所有以前的 background-color 、background-image等規范，它基本上是一個重置。
background 比 background-color 更高效
正如文章開頭說的那樣，純顏色時使用background和background-color的結果是一樣。但是從效率上來說是不同的，確切來說，純顏色使用background更高效。
下面是一個有趣的實驗。
比較 18 種顏色樣本在頁面上以小矩形呈現 100 次，一次使用background，一次使用background-color。
雖然這些數字來自單個頁面重新加載，但隨著后續刷新渲染時間發生了變化，但每次的百分比差異基本相同。
當使用background而不是background-color時，在 Safari 7.0.1 中，這節省了近 42.6 毫秒，幾乎快了一倍。Chrome 33 似乎也差不多。
老實說，這讓我大吃一驚，因為最長的時間有兩個原因：
- 我通常總是主張 CSS 屬性的明確性，尤其是背景，因為它會對未來的特異性產生不利影響。
- 我認為當瀏覽器看到
background: #000;時，它看到的是background: #000 none no-repeat top center;。
所以，堅持使用 background，是正確的選擇。
總結
本文詳細介紹了 background 與 background-color 有哪些異同之處，通過本文的學習，我們應該知道如何更合理地去使用這兩個屬性。
相關文章
