被覆蓋的CSS屬性取消或只是覆蓋？

Question

我的意思是，

如果我這樣做：

#item { background:url('image.jpg');} 

，然後在另一個樣式表I DO

#item {background:red;} 

將瀏覽器加載image.jpg文件，然後cancell並設置紅色，或會直接變紅？ （沒有加載圖片）

謝謝！

Answer 1

它將兩者都做，因爲這兩個語句是一樣的

#item { background: red url('image.jpg'); } 

或

#item { background-color: red; } 
#item { background-image: url('image.jpg'); } 

在這兩種情況下，背景將有一個形象，並且項目元素的整個區域呈現紅色。因此，一個不透明的圖像，例如透明的.png，在透明區域也會被填充爲紅色。

但是，作爲腳本解析以級聯的方式CSS，

#item { background: url('image.jpg'); } 
#item { background: url('anotherimage.jpg'); } 

它會載入「anotherimage」而忽略另一個。 直到CSS完成編譯並確定specificity的順序後才發送請求。換句話說，第一個圖像被覆蓋，因此從不要求。

「背景」實際上是一種短手屬性，如「邊框」，將所有不同的屬性組合成一個語句。 這是關於「背景」屬性的link，向下滾動，您可以閱讀它。

Answer 2

在這種特殊情況下，瀏覽器應該加載圖像並同時應用紅色，因爲這兩個定義並不真正重疊。這就像分別設置屬性「背景顏色」和「背景圖像」。這是有道理的，因爲可能會有一個小的背景圖像和一個紅色背景，用於其他更大的元素。

通常，定義被覆蓋，但取決於所謂的特異性。檢查此頁面瞭解更多關於該http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/