html - css 和图像精灵

Question

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

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

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

还是有另一种方法只包含一次图像？

score 7 · Accepted Answer

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

但是在这种情况下你想做的就是让 CSS 完成它的工作。
如果这些按钮是<a>例如。

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

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

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

score 4 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

所以图像不会被发送两次，而是从缓存中使用。

3 回答 3