带有html和css的精灵

我有一些使用精灵的代码，这看起来像一个水平导航条。我的问题是：对于下面显示的代码，这种方法是否真的会导致最终用户下载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>

---

请求只发生一次，图像将被缓存。图像将再次被重新绘制，但不会请求服务器。它只请求服务器一次。但是，将

url（）

放在主类或单个实例中始终是一种很好的做法：

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

---

此外，最好单独使用

background position

，而不是

background

，而且您不需要在

：hover

中再次重用

background:url（）

，它将只下载一次，这是使用CSS sprite表单的主要原因，如果您为每个图标提供一个正常和悬停状态的图像，则该图标将只下载一次，并且只需要一个HTTP请求，而不是8个HTTP请求

不，这就是它的实现方式，你做得很正确

资源：

---

编辑：

---

如前所述，您只为所有相应的规则编写一次

url（）

，并使用

背景位置

根据您的图像水平或垂直移动图像

我没有引用任何内容，我几年前刚写的内容，我将w3schools作为第二个链接，但没有引用任何内容，我也知道有些人是反W3学校的，在某些情况下他们是对的，但这并不意味着所有来自W3学校的信息都是错误的！可以酷。不过，最好还是避免使用那个网站。他可以从我发布的资源中自由选择。我谦虚的要求是，请不要通过显示学校链接来引导人们。我知道他们在一些方面很好。尽管如此，您仍然欢迎，在一些w3schools网页上出现错误或误导性信息之前，开发人员开始警告其他人，尽管自那时起情况发生了变化，w3schools仍然名声不好，请阅读这里的答案，谢谢，这使代码看起来更整洁。现在我已经做了您建议的更改，当您说图像将再次重画时，我只是好奇这是否意味着整个精灵图像被绘制或加载了4/8次，或者绘制了一次，而显示区域之外的其他位只是隐藏在视图之外。@smally好吧，每个渲染过程都是重画的，我的意思是。最重要的是，浏览器不会向服务器请求新图像。采用这种方式，当图像此时已更改时，浏览器已请求前三个

url（）

s，当第四个图像被解析时，新图像将不会显示。