覆盖CSS背景图片样式-两个图片都会加载吗？

Question

如果我有两个CSS样式为一个元素分配背景图像，其中一个样式覆盖另一个样式。浏览器会下载两个图像还是只下载覆盖的那个？

我问这个问题的原因是我最近参加了一个关于移动设备条件样式表的研讨会。如果我用较小的背景图片覆盖我的正常背景图片以节省带宽，那么较大的图片是否仍然会被加载？那个人似乎在说这种方式可以实现，但对我来说似乎很奇怪。

- Evanss

---

在您的浏览器开发者工具中，检查网络选项卡以查看加载了哪些文件。由于浏览器作为客户端发出请求，我认为此策略是由浏览器决定的。 - galchen

不错的问题，我的猜测是它没有被下载（如果你有一个未使用的CSS类，浏览器也不会加载其背景），但我不能确定。 - remi bourgarel

Answer 1

在某些情况下，答案似乎是肯定的：

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

http://www.cloudfour.com/examples/mediaqueries/image-test/#t4

- Evanss

Answer 2

覆盖的图像不会被加载。

为了更清楚地说明，例如：http://jsfiddle.net/thirtydot/MjKfG/1/show/

<div id="test">test</div>

div {
    background: url(http://dummyimage.com/600x400/000/fff)
}
#test {
    background: url(http://dummyimage.com/200);
    width: 200px;
    height: 200px
}

只有 http://dummyimage.com/200 会被加载。

这至少在Chrome、Safari、Firefox、IE8/9和Opera中是正确的。

我猜测它在所有浏览器中都是正确的，因为这是一种简单而有效的优化。

- thirtydot

Answer 3

答案是否定的。第一个将被覆盖，无法加载背景属性。为什么呢？因为浏览器在加载任何其他资源之前首先加载您的css文件。它们优先处理css文件，然后根据顺序和覆盖顺序开始加载图像。

例如：

div {
    border: solid 1px #000000;
    background: url('images/sprites.png') no-repeat x y;
}

.mobile div {
    border: solid 1px #000000;
    background: url('images/sprites_mobile.png') no-repeat x y;
}

浏览器会处理此CSS，使您的移动设备变成这样：

div {
    border: solid 1px #000000;
    background: url('images/sprites_mobile.png') no-repeat x y;
}

现在，浏览器已经忽略了加载 sprites_mobile.png。

- lnguyen55

Answer 4

你能否进行一次实验并查看Web日志文件以了解发生了什么？

否则，为什么不使用一些PHP根据设备选择适当的样式表呢？

- Ed Heal