html - css 和图像 Sprite

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