如果用媒体查询替换背景图像会加载吗？

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;
    }
}

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