覆蓋CSS背景圖像樣式 - 兩個圖像都加載？

Question

如果我有2個CSS樣式將背景圖像分配給一個元素，並且一個樣式覆蓋另一個樣式。這兩個圖像是由瀏覽器下載還是隻是壓倒性的？

我之所以問我是最近出席了一個關於移動設備條件樣式表的研討會。如果我用較小的覆蓋我的正常BG圖像以節省帶寬，無論如何將加載較大的圖像？這似乎是這個傢伙說的，但對我來說，這似乎很奇怪。

Answer 1

似乎在某些情況下，答案是肯定的：

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

http://www.cloudfour.com/examples/mediaqueries/image-test/#t4

在開發者工具

Answer 2

您是否可以不做實驗並查看Web日誌文件以查看發生了什麼？

否則爲什麼沒有一點PHP來選擇適當的樣式表取決於設備。

Answer 3

重寫的圖像將不會被加載。

只要是明確的，例如：http://jsfiddle.net/thirtydot/MjKfG/1/show/

<div id="test">test</div> 

div { 
    background: url(http://dummyimage.com/600x400/000/fff) 
} 
#test { 
    background: url(http://dummyimage.com/200); 
    width: 200px; 
    height: 200px 
} 

只有http://dummyimage.com/200將被載入。

至少在Chrome，Safari，Firefox，IE8/9，Opera中都是如此。

我想猜想在所有瀏覽器中都是如此，因爲它是一種簡單而有效的優化。

Answer 4

答案是否定的。第一個被覆蓋不會加載背景屬性。爲什麼？由於瀏覽器在加載任何其他資源之前首先加載您的css文件。他們首先處理css文件，然後根據順序和覆蓋順序開始加載圖像。

例如：

div { 
    border: solid 1px #000000; 
    background: url('images/sprites.png') no-repeat x y; 
} 

.mobile div { 
    border: solid 1px #000000; 
    background: url('images/sprites_mobile.png') no-repeat x y; 
} 

瀏覽器將處理這個C​​SS爲您的手機變成這個樣子：

div { 
    border: solid 1px #000000; 
    background: url('images/sprites_mobile.png') no-repeat x y; 
} 

而現在，瀏覽器已經忽略了sprites_mobile.png加載。