Css 覆盖背景图像时，两个图像是否都已下载？

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

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

---

CSS是一种解释语言。它将逐行执行，直到完成为止，所以是的，它将同时抓取这两个

编辑：

根据解释语言的本质，这就是它应该如何工作

---

浏览器中似乎有智能预处理器，用于查找类似的内容。

我其实不知道，所以：

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

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

更多编辑：即使使用

样式

属性设置背景，也会得到相同的结果。它将只下载具有最高特异性的文件。

测试：

结果是：

---

您可以用第二个声明覆盖

background

属性，因此不会下载两次。只有最后一个被实际使用。

关于这个主题的类似帖子。哦，哇，我没想到会这样。其他浏览器也支持该功能？非常感谢。我将查看它到底是如何工作的，但它似乎首先查看css。但我很好奇是否所有浏览器都一样。确定吗？其他人似乎不同意。@John它应该这样做，但是浏览器有CSS预处理器，它们会注意类似的事情。如果没有这些功能，它将一次抓住一个。解释并不总是意味着它是逐行执行的。99%的解释语言都是以中间形式预编译的，因此在这个级别上可能会进行一些优化。谢谢Blender。你是一个伟大的软件，你也知道一些css。令人惊叹的。

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