|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
CSS background與background-color的幾個(gè)不同之處
作者:admin 時(shí)間:2022-8-4 10:40:40 瀏覽:今天在做一個(gè)實(shí)例時(shí)，偶爾發(fā)現(xiàn)background與background-color的的不同，于是研究了一下，總結(jié)出了它們的幾個(gè)不同之處。
background 與 background-color 相同之處
在介紹它們有哪些不同之處之前，我們應(yīng)該已經(jīng)知道，它們?cè)谠O(shè)置純顏色時(shí)，是相同的，即是可以通用的，并且后者會(huì)覆蓋前者。例如：
background 與 background-color 不同之處
如果背景為非純顏色，那么 background 與 background-color 在使用上就有差異。
可以這樣理解，background 是 background-color 的縮寫(xiě)，而背景顏色屬性實(shí)際上包括：
background-color
background-image
background-position
background-repeat
background-attachment
background-clip
background-origin
background-size
因此，除了 background-color 之外，你還可使用其他 background-* 屬性。
圖片背景
假如先設(shè)置了 background 為一個(gè)圖片背景，其CSS代碼為：
background: url(images/image1.jpg);
那么你不能再使用 background-color 設(shè)置其背景顏色，如：
background-color: #cccccc;
但是你可以再使用 background 設(shè)置其背景顏色，覆蓋前面的設(shè)置，如：
background: #cccccc;
漸變背景
與圖片背景設(shè)置方法一樣，假如先設(shè)置了 background 為一個(gè)漸變背景，其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ī)范，它基本上是一個(gè)重置。
background 比 background-color 更高效
正如文章開(kāi)頭說(shuō)的那樣，純顏色時(shí)使用background和background-color的結(jié)果是一樣。但是從效率上來(lái)說(shuō)是不同的，確切來(lái)說(shuō)，純顏色使用background更高效。
下面是一個(gè)有趣的實(shí)驗(yàn)。
比較 18 種顏色樣本在頁(yè)面上以小矩形呈現(xiàn) 100 次，一次使用background，一次使用background-color。
雖然這些數(shù)字來(lái)自單個(gè)頁(yè)面重新加載，但隨著后續(xù)刷新渲染時(shí)間發(fā)生了變化，但每次的百分比差異基本相同。
當(dāng)使用background而不是background-color時(shí)，在 Safari 7.0.1 中，這節(jié)省了近 42.6 毫秒，幾乎快了一倍。Chrome 33 似乎也差不多。
老實(shí)說(shuō)，這讓我大吃一驚，因?yàn)樽铋L(zhǎng)的時(shí)間有兩個(gè)原因：
- 我通?？偸侵鲝?CSS 屬性的明確性，尤其是背景，因?yàn)樗鼤?huì)對(duì)未來(lái)的特異性產(chǎn)生不利影響。
- 我認(rèn)為當(dāng)瀏覽器看到
background: #000;時(shí)，它看到的是background: #000 none no-repeat top center;。
所以，堅(jiān)持使用 background，是正確的選擇。
總結(jié)
本文詳細(xì)介紹了 background 與 background-color 有哪些異同之處，通過(guò)本文的學(xué)習(xí)，我們應(yīng)該知道如何更合理地去使用這兩個(gè)屬性。
相關(guān)文章
標(biāo)簽: background-color background 背景顏色
- 站長(zhǎng)推薦
