Question

如果你有两个这样的规则：

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

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

并拥有<div class='foo'>Foobar</div>

您的浏览器会同时缓存两者，还是仅显示实际显示的内容（在这种情况下为bar.gif）？

在所有设置中都是如此吗？（规则在不同的文件中，!important应用于一个，等等）

Answer 1

我假设“缓存”在这里，你的意思是“预加载”。实际的“缓存”与过期标题等有关。

它完全基于浏览器的行为以及它选择做什么。但是，我的经验是，现代浏览器无需加载CSS文件中定义的图像，除非实际调用该图像。

这是一些选择将元素的默认状态和悬停状态都设置为一个图像，然后使用background-position属性来更改可见内容的原因之一。有更多的开销，但悬停和显示悬停状态之间也没有延迟，从而使体验更加顺畅。

Answer 2

浏览器在读取css时不会加载图像，只是记住它们。当它开始渲染页面时，它开始加载图像。

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

Answer 3

我可以告诉他（使用FireBug），它只会提取您显示的图像，而不是已定义的图像。

Answer 4

在我的本地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）。

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

Answer 5

如果两个规则具有相同的特异性，则稍后将应用。在此处详细了解specificity。

如果没有使用，浏览器会缓存CSS背景图像吗？

5 个答案: