css - 多个图标的单个 PNG 文件

Question

我注意到 Facebook 和 Instagram 使用相同的方式来显示在网站上找到的图标，即将所有图标添加到一个 PNG 文件中，并根据它们的位置制作样式？

请看Instagram way of doing it .

据我所知，通过这种方式，客户端只会收到一个将被缓存的图像，用户性能会提高。但他们是怎么做到的？

感谢您的宝贵时间!

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/