Question

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

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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