Html 覆盖CSS背景图像样式-两个图像都已加载？

如果我有两个CSS样式将背景图像分配给元素，并且一个样式覆盖另一个样式。这两个图像是由浏览器下载还是仅由覆盖图像下载

---

我问这个问题的原因是我最近参加了一个关于移动设备条件样式表的研讨会。如果我用较小的bg图像覆盖我的正常bg图像以节省带宽，是否仍会加载较大的图像？这似乎是那个家伙所说的，但我觉得奇怪的是，它会以这种方式工作

您不能做一个实验并查看web日志文件来查看发生了什么吗

---

否则，为什么不使用一点PHP来根据设备选择适当的样式表。

将不会加载覆盖的图像

举例来说，我想说清楚：

测试
div{
背景：url(http://dummyimage.com/600x400/000/fff)
}
#试验{
背景：url(http://dummyimage.com/200);
宽度：200px；
高度：200px
}

仅<代码>http://dummyimage.com/200将被加载

至少在Chrome、Safari、Firefox、IE8/9和Opera中是如此

---

我想这在所有浏览器中都是正确的，因为这是一个简单而有效的优化

答案是否定的。第一个被重写的将不会加载后台属性。为什么？因为浏览器在加载任何其他资源之前先加载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\u mobile.png

。

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

---

在浏览器的开发者工具中，检查网络选项卡以查看加载了哪些文件。由于浏览器（作为客户端）发出请求，我想这个策略是由浏览器决定的。好问题，我的问题是它没有下载（如果你有一个未使用的css类，浏览器也不会加载它的背景），但我不能确定。

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