浏览器是否会缓存CSS背景图像（如果'；它没用吗？

当你有两条这样的规则时：

.foo {
  background-image: url(foo.gif);
}

.foo {
  background-image: url(bar.gif);
}

并且有

Foobar

您的浏览器会同时缓存这两种内容，还是只缓存实际显示的内容（在本例中为

bar.gif

）

在所有设置中都是这样吗？（规则在不同的文件中，

！重要的

应用于一个文件，等等）

正如我所知（使用FireBug），它只提取您显示的图像，而不是定义的图像。

我假设这里的“缓存”是指“预加载”。实际的“缓存”与expires标头等有关

它完全基于浏览器的行为和它选择做什么。然而，根据我的经验，现代浏览器并不需要加载CSS文件中定义的图像，除非实际需要该图像

---

这就是为什么有些人选择将元素的默认状态和悬停状态都设置为一个图像，然后使用

背景位置

属性更改可见的位置的原因之一。开销稍大一些，但在悬停和显示悬停状态之间也没有延迟，这有助于获得更流畅的体验。

如果两个规则具有相同的特殊性，则稍后将应用。

---

阅读更多关于这里的信息

浏览器在读取css时不会加载图像，它只是将图像牢记在心。当它开始呈现页面时，它开始加载图像

---

因此，在您的情况下，您已经覆盖了css规则，当浏览器呈现页面时，它会忽略您的css规则，并且自然不会加载您的第一个图像。

在本地apache日志中使用tail-f，我发现以下内容：

::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.html HTTP/1.1" 200 127
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /test.css HTTP/1.1" 304 -
::1 - - [21/Jul/2010:13:28:50 -0700] "GET /bar.gif HTTP/1.1" 404 205

使用firefox，浏览器只尝试加载“bar.gif”（由于我没有该图像，所以找不到404）

---

如果您对其他浏览器感兴趣，我也可以对其进行测试。

感谢您提供的示例，说明了这一点可能很重要-很高兴知道。+1-良好的测试方法-如果我需要对其进行广泛测试，请记住这一点。谢谢。我知道哪一个是适用的-我甚至说哪一个显示在问题中。这不是问题所在。只有那些被应用的才会被缓存。