css 和图像精灵答案

【问题标题】：css and image spritescss 和图像精灵
【发布时间】：2010-10-15 05:05:43
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

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

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：