logo标签列表

如果使用媒体查询替换背景图片，背景图片还会加载吗？

cssresponsive-designbackground-imagemedia-queries
4

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

现在我一直在想：如果在媒体查询中用颜色替换了我的div上的背景图片，那么这个背景图片会加载吗？

例如：

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

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

    div {
        background: #000;
    }
}
你试过运行它看看吗？我很确定CSS媒体查询的工作方式是，如果屏幕分辨率在那些尺寸范围内，则对于该特定元素的样式，它将使用您在查询中定义的内容，而不是其外部的内容。 - j0hnstew
我不知道怎么查看我的移动设备上加载了哪些文件。 - Swen
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;
    }
}
< p >< em>* 注意这是与浏览器相关的；为了节省时间，大多数浏览器只在需要时加载资源。另请参阅：未使用的CSS图像被下载吗？

我只是想知道是否使用媒体查询来用纯色替换图像会增加移动设备的加载速度。正如你所描述的那样，似乎确实如此！非常感谢 :) - Swen
如果你想要一个背景图片和颜色，你也可以这样做：background: url(../images/tab-1a.png) no-repeat #767676;！不过回答很好。 - Josh Powell
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接