多个图标的单个 PNG 文件

Question

我注意到Facebook和Instagram使用与网站上相同的图标显示方式，即将所有图标添加到单个PNG文件中，并根据它们的位置进行样式设置？

请看一下Instagram的方式。

我知道这样，

客户端将只接收一个将被缓存的图像，并且用户性能将提高。但是他们是怎么做到的呢？

谢谢你的时间！

Answer 1

他们通过制作一个div或span或其他任何东西来做到这一点，以该图像的背景，然后更改背景位置。

例

.icons {
  height:20px;
  width: 20px;
  background-image: url("path/to/image");
}
.icon1{
  background-position: 0 0
}
.icon2{
  background-position: 30px 0
}

JSFiddle： https://jsfiddle.net/qxjyycv2/

Answer 2

你要找的是图像精灵。

显示图像的div(始终作为背景图像(设置为 overflow: hidden;，同时背景位置更改以显示精灵的正确部分。

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

Answer 3

您可以使用

此工具从多个图像及其 CSS 生成 CSS 精灵(单个 png 图像(：CSS 精灵生成器