浏览器是否缓存CSS背景图片？

Question

当我在不同的元素中使用相同的图像（精灵图像）时，通常不会再次调用该图像，因为这会发起新的HTTP请求。

我更喜欢使用：

element1 {
    background: url(someImage.png);
}

element2 {
    background-image: inherit;
}

这样做可以减少HTTP请求吗？

如果浏览器聪明，我能用以下方式：

element1 {
    background: url(someImage.png);
}

element2 {
    background: url(someImage.png);
}

浏览器会发起新的HTTP请求吗？还是它知道我已经缓存了这张图片？

问题是：使用示例1，我能获得什么？

- adardesign

Answer 1

在您描述的情景中，浏览器基本上会在同一页上引用相同的图像，这几乎肯定会被缓存。

在不同页面上，答案取决于浏览器和您的服务器发送的到期标头，这将影响符合代理缓存行为。

- JasonTrue

---

使用 background-image:inherit; 会有什么好处吗？ - adardesign

除了让你的IE6和IE7用户看起来更糟糕之外，还有其他作用吗？实际上没有。而且inherit只会在第一个CSS选择器应用于第二个元素时产生影响；如果它们两者或第一个不匹配，则不会有任何效果。 - JasonTrue

Answer 2

是的，浏览器会从缓存中加载CSS文件中对同一图像的第二次引用。使用Firebug，您可以查看浏览器发出的所有HTTP请求。

- jeffreyveon

---

使用background-image:inherit;会带来什么好处吗？ - adardesign

Answer 3

如果您想简化事情、缓存资源并节省带宽，那么您应该在网站根目录下创建一个 appcache.appcache 文件。此链接提供了有关如何制作 appcache 的教程。如果用户多次访问您的网站，它可以减少 http 请求，并且如果图像已经存在于缓存中，则不会重复请求相同的图像。

祝您缓存愉快！

- Ilan Biala