css和图像精灵

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;
}