css - 如果用媒体查询替换背景图像，是否会加载它们？

Question

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

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

例子:

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

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

    div {
        background: #000;
    }
}

Answer 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?