css - 覆盖背景图像时，是否都下载了两个图像？

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

我其实不知道，所以我测试了一下：

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

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

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

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

Answer 3

CSS 是一种解释型语言。它将逐行执行，直到完成，所以是的——它会抓住两者。

编辑：

就解释语言的性质而言，它应该是这样工作的......

似乎在浏览器中嵌入了智能预处理器来寻找这样的东西。