建站时，如何将多张小图合并成一张大图？

Question

你好，当我在chrome开发者工具中打开google首页时，我发现他们把多个图标打包成一个大的png文件然后一起下载（如上）。我认为这是加速页面加载的一种比较常见的方法。有人可以指出我该怎么做吗？更好的是有一个库来处理 bundle/debundle 吗？

（我花了很多时间在网上搜索这个但找不到我需要的东西。任何帮助将不胜感激！）

Answer 1

这里有一个 jsfiddle 。 下面的代码是针对一个图标的。您可以使用 background-position

移动您的大图片

.sprite-gmail {
    width: 30px;
    height: 30px;
    background-position: -45px -5px;
}

这里有来自 w3Schools 的好书 post，可以更好地了解如何获得您想要的东西