CSS和图像精灵

Question

我有一个关于css中精灵图的问题： 如果我在css文件中两次包含同一张图片，那么我会发送两个HTTP请求吗？例如，如果我想从同一组图标中加载两个不同的按钮：

.btn-1 {
    background:url('img/icons.png') 0 0;
}

.btn-2 {
    background:url('img/icons.png') 0 -60px;
}

还有其他方法只包含一次图片吗？

- Dennis

Answer 1

浏览器会缓存图片，所以第二次从缓存中获取。
但在这种情况下，你想要做的是让CSS发挥作用。
如果这些按钮是<a>，例如。

a {
    background: url('img/icons.png');
}

.btn-1 {
    background-position:0 0;
}

.btn-2 {
    background-position: 0 -60px;
}

- Ólafur Waage

---

换句话说：你仍然有两个请求的潜力，但实际上浏览器足够聪明，可以避免它们。 - Joel Coehoorn

看起来不错，Youtube使用类似的方法，在名为“master-sprite”的CSS类中包含精灵图，然后每次需要图标/图像时调用该CSS类。 - Dennis

Answer 2

除了Ólafur所说的之外，您还可以重写您的CSS，使URI引用仅出现一次：

.btn-1,
.btn-2 {
    background:url('img/icons.png') 0 0;
}
.btn-2 {
    background-position: 0 -60px;
}

- Gumbo

Answer 3

是的，但客户端应该收到HTTP 304

304未修改 如果客户端执行了有条件的GET请求并允许访问，但文档未被修改，则服务器应该使用此状态代码响应。 304响应不得包含消息正文，因此始终在标头字段后的第一行空行处终止。

因此，图像不会发送两次，而是从缓存中使用。

HTTP / 1.1：状态代码定义

- Philippe

---

不会，每张图片在页面加载时只会被请求一次。 - Guffa