CSS-使用一个背景图像和多个图像

我观察到，网站通常只使用一个背景图像，其中包含多个图像。例如，不是单独使用图标，而是将所有图标放在一个图像上，然后在不同的部分中使用图像的不同部分

• 这有什么好处吗
• 这个怎么用

例如，对于下面的堆栈溢出精灵，如何仅显示其中一个图像

---

更改css属性

背景位置

您正在谈论css精灵，其中背景位置在悬停时发生变化。在此处了解更多信息：

---

它的优点是只需加载一张图像，这样悬停（翻滚）效果等效果会更快。这种技术通常被称为“CSS精灵”。谷歌搜索。这种技术被称为。基本上，您使用CSS的

背景位置

属性，并为元素固定

高度

或

宽度

---

如果元素同时具有固定宽度和固定高度，则可以自由创建更紧凑的图像。有关更复杂的示例，请参阅。

是的，使用精灵有利于网站的性能，因为网站上的每个组件都发送不同的http请求。因此，当我们使用精灵图像时，http请求变少，网站性能提高。这条规则也适用于css，也适用于css，更少的css文件，更少的http请求。您可以在safari web inspector的帮助下进行自我检查

---

要获得更好的性能，请下载“yslow”

，并使用CSS精灵，无需等待第二张图像加载即可实现菜单按钮悬停等效果

将两幅图像放在一张精灵工作表上已经很普遍了，但趋势是将所有背景图像组合在同一张精灵工作表上，以便只为所有图像加载一个文件。有一个相当不错的例子。

谢谢，这非常有帮助。