Html css和图像精灵

我有一个关于css中精灵的快速问题： 如果在css文件中包含两次相同的图像，我会发送两个HTTP请求吗？例如，如果要从同一图标集图像加载两个不同的按钮：

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

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

---

或者是否有其他方法只包含一次图像？

浏览器将缓存图像，以便第二次从缓存中获取图像

但在这种情况下，您想做的是让CSS完成它的工作。
例如，如果这些按钮是

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

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

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

---

是，但客户端应接收HTTP 304

304未修改 如果客户端执行了条件GET请求，并且允许访问，但文档尚未修改，则服务器应使用此状态代码进行响应。304响应不能包含消息体，因此总是由头字段后的第一个空行终止

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

---

除了拉福尔所说的，您还可以重写CSS，使URI引用只出现一次：

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

---

换句话说：你仍然有可能会有两个请求，但实际上浏览器足够聪明，可以避免它们。看起来不错，Youtube使用了类似的方法，将精灵包含在一个名为“master sprite”的css类中，然后每当他们需要一个图标/图像时，他们就称之为css类。不，每页仅请求一次每个图像。