覆盖背景图像时，是否都下载了图像？

Question

这两张图片都会被下载吗？浏览器是否智能，只下载最后一个？它会开始下载第一个然后取消它，还是等到所有css都加载然后下载最后一个图像？

body { background:url(img/bg/bg1.png) }
body { background:url(img/bg/bg2.png) }

Answer 1

测试出来：http://fiddle.jshell.net/8xZNY/show/

结果：

您使用第二个声明覆盖background属性，所以不，它们不会被下载两次。实际上只使用了最后一个。

Answer 2

我实际上不知道，所以I tested it out：

body { background:url(http://placekitten.com/200/300) }
body { background:url(http://placekitten.com/g/200/300) }

它可能取决于浏览器，但似乎至少对于Chrome（并且逻辑上）它首先解析样式表 以确定应用的规则，然后下载图像以应用规则。这意味着只下载了第二个图像（“网络”选项卡确认了这一点）。

编辑：在Firefox中进行相同的结果测试

更多编辑：即使使用style属性设置背景，结果也相同。它只会下载具有最高特异性的那个。

Answer 3

CSS是一种解释型语言。它将逐行执行，直到它完成，所以是的 - 它会同时抓住它们。

修改

根据解释性语言的性质，这就是 的工作方式......

似乎有很多智能预处理程序可以在浏览器中找到这样的东西。