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

Question

这不是我第一次见到这种形象：

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

谢谢！

Answer 1

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

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

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

您可以在以下网址了解详情：http://www.w3schools.com/css/css_image_sprites.asp

Answer 2

它被称为＆＃34; CSS Image Sprite＆＃34;。

链接更多信息：

• http://css-tricks.com/css-sprites/
• http://www.w3schools.com/css/css_image_sprites.asp

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

Answer 3

这些图像称为精灵

http://www.w3schools.com/css/css_image_sprites.asp

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

http://csssprites.com/