Question

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

请查看Instagram way of doing it。

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

感谢您的时间！

Answer 1

您正在寻找的是Image Sprites。

您正在显示图像的div（始终作为背景图像）设置为overflow: hidden;，而背景位置会更改以显示精灵的正确部分。

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

Answer 2

他们通过制作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/

适用于多个图标的单个PNG文件

2 个答案: