html - 带有 html 和 css 的 Sprite

Question

我有一些使用 sprite 的代码，它被设计成看起来像水平导航栏。我的问题是:对于下面显示的代码，此方法实际上会导致最终用户下载 png 图像 8 次还是仅下载一次。

如果真的是一次，有没有更好的方法来做到这一点？

CSS 代码

#facebook, #twitter, #linkedin, #googleplus {
    width: 64px;
    height: 64px;
    display: inline-block;
}

#facebook {
    background: url("images/sprite.png") 0 0;
}

#twitter {
    background: url("images/sprite.png") -64px 0;
}

#linkedin {
    background: url("images/sprite.png") -128px 0;
}

#googleplus {
    background: url("images/sprite.png") -192px 0;
}

#facebook:hover {
    background: url("images/sprite.png") 0 -64px;
}

#twitter:hover {
    background: url("images/sprite.png") -64px -64px;
}

#linkedin:hover {
    background: url("images/sprite.png") -128px -64px;
}

#googleplus:hover {
    background: url("images/sprite.png") -192px -64px;
}

HTML代码:

<nav>
    <a id="facebook" href="https://www.facebook.com"></a>
    <a id="twitter" href="https://www.twitter.com"></a>
    <a id="linkedin" href="https://www.linkedin.com"></a>
    <a id="googleplus" href="https://plus.google.com"></a>
</nav>

Answer 1

请求只会发生一次，图像会被缓存。图像将重新绘制，但不是通过请求服务器。它只请求服务器一次。但是在主类或单个实例中使用 url() 始终是一个好习惯:

#facebook, #twitter, #linkedin, #googleplus {
  background: url("images/sprite.png");
}

此外，最好单独使用background-position，而不是background，也不需要重用background: url() 再次在 :hover.