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

时间:2013-10-29 14:18:04

标签: css responsive-design background-image media-queries

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

现在我一直在想的是:我的div上的背景图片是否会被媒体查询中的颜色替换?

示例:

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

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

    div {
        background: #000;
    }
}

2 个答案:

答案 0 :(得分:5)

不,不会因为你完全覆盖background属性*。

但是,作为参考,如果您希望保持图像添加颜色,而不是使用background属性,请使用个人background-image和{{ 1}}属性:

background-color

*请注意,这是特定于浏览器的;为了节省时间,大多数浏览器只会在需要时加载资源。另请参阅:Are unused CSS images downloaded?

答案 1 :(得分:1)

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

有一篇关于图像加载的有趣文章。响应式设计的表现:

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