如果背景图像被媒体查询替换，它们会加载吗？

Posted 2023-03-06

【中文标题】如果背景图像被媒体查询替换，它们会加载吗？

【英文标题】：Do background images load if they are replaced with media queries?

【发布时间】：2013-11-08 18:14:33

【问题描述】：

我正在创建响应式设计，以便在桌面设备和移动设备上都能很好地查看我的网站。在我的网站上，我的一个 div 上有一张相当大的背景图片。

现在我一直想知道的是：如果我的 div 上的背景图像被媒体查询中的颜色替换，它会加载吗？

例子：

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


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

    div 
        background: #000;
    

【问题讨论】：

你试过运行它看看吗？我很确定它与 CSS 媒体查询一起使用的方式是，如果屏幕分辨率在这些尺寸范围内，那么对于该特定元素的样式，它会使用您在查询中定义的样式，而不是查询之外的样式。

我不知道如何查看我的移动设备上加载了哪些文件。

【参考方案1】：

不，因为您完全覆盖了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?

【讨论】：

我只是想知道使用媒体查询将图像替换为纯色是否会提高移动设备的加载速度。正如你所描述的，它似乎确实如此！非常感谢:)

你也可以这样做，background: url(../images/tab-1a.png) no-repeat #767676;，如果你想要背景图片+颜色！不过答案很好

【参考方案2】：

您的图片仍然由浏览器加载，只要它们在您的 CSS 中。您可以使用 Chrome Debugger Tool > Network 进行检查。

有一篇关于响应式设计中的图像加载和性能的有趣文章：

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