如何指向图标集中的特定图标？答案

【问题标题】：How to point to a specific icon in an icon set?如何指向图标集中的特定图标？
【发布时间】：2014-11-27 10:41:24
【问题描述】：

这不是我第一次看到这种图片：

似乎每个图标都是通过使用 CSS (???) 以编程方式指向的。它被称为图标集吗？在浏览网站时，我可以单独看到这些图标，但是当我尝试保存它们时，它们显示为 base64 编码文件，并且所有单个图像都在同一个 png 文件中。我的意思是，它是如何工作的？有没有办法拆分它们？它们如何在网站中使用？

谢谢！

【问题讨论】：

【解决方案1】：

它被称为“CSS Image Sprite”。

更多信息的链接：

这是Web开发中非常常见的方法。很大程度上是因为它有助于限制 HTTP 请求。图像仅下载一次到用户缓存，然后移动以仅显示需要的部分。这比下载多张图片要高效得多。

【讨论】：

【解决方案2】：

这些是精灵并以这种方式工作：您将图像上传到您的服务器，然后将它们应用到具有此代码的元素，例如..

HTML

<div id="icon"></div>

CSS

.icon{
  width: 20px;
  height: 20px;
  background: url(yourimage.png) 0 0;
}

.icon:hover{
  background: url(yourimage.png) 20 0;
}

背景网址后的第一个数字是水平缩进，第二个是垂直缩进。

【讨论】：

【解决方案3】：

这些图像被称为精灵

这个网站非常适合生成精灵

【讨论】：