如果使用媒體查詢替換背景圖片，是否會加載背景圖片？

我創建了自適應設計，因此我的網站在臺式機和移動設備上均可正常瀏覽。在我的網站上，我的一個div上有一個很大的背景圖片。如果使用媒體查詢替換背景圖片，是否會加載背景圖片？

現在我一直想知道的是：如果在媒體查詢中用顏色代替div上的背景圖像，是否會加載背景圖像？

例子：

div { 
    background: url(img/large-image.jpg); 
} 

@media screen and (min-width: 240px) and (max-width:830px) { 

    div { 
     background: #000; 
    } 
}

來源

2013-10-29 Swen

你嘗試運行它看？我非常肯定它與CSS媒體查詢的工作方式是，如果屏幕資源屬於這些維度，那麼對於該特定元素的樣式，它將使用您在查詢中定義的內容而不是其中的內容。 – j0hnstew

我不知道如何查看哪些文件在我的移動設備上加載。 – Swen

不，它不會因爲你完全重寫background財產*。

作爲參考，但是，如果你想保持你的形象和添加的顏色，而不是使用background屬性，使用單獨的background-image和background-color屬性：

div { 
    background-image: url(img/large-image.jpg); 
} 

@media screen and (min-width: 240px) and (max-width:830px) { 
    div { 
     background-color: #000; 
    } 
}

*注意這是針對瀏覽器的;爲了節省時間，大多數瀏覽器只會在需要時加載資源。另請參閱：Are unused CSS images downloaded?

來源

2013-10-29 14:22:24

我只是想知道，如果使用媒體查詢以純色替換圖像會增加移動設備上的加載速度。正如你所描述的那樣，它似乎確實如此！非常感謝你:) – Swen

你也可以這樣做，'background：url（../ images/tab-1a.png）no-repeat＃767676;'，如果你想要背景圖片+顏色！雖然答案很好 –

只要它們在您的CSS中，您的圖像仍然由瀏覽器加載。您可以使用Chrome調試器工具>網絡進行檢查。

有一個關於圖像加載一個有趣的文章&性能響應式設計：

http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/

來源

2013-10-29 14:24:28 TrungDQ

如果使用媒體查詢替換背景圖片，是否會加載背景圖片？

回答

相關問題