4

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

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

例子：

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

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

    div {
        background: #000;
    }
}
4

2 回答 2

6

不，它不会因为您完全覆盖该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;
    }
}

* 请注意，这是特定于浏览器的；为了节省时间，大多数浏览器只会在需要时加载资源。另请参阅：是否下载了未使用的 CSS 图像？

于 2013-10-29T14:22:24.253 回答
2

您的图像仍然由浏览器加载，只要它们在您的 CSS 中。您可以使用 Chrome 调试器工具 > 网络进行检查。

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

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

于 2013-10-29T14:24:28.333 回答