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

Question

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

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

Answer 1

在这里你有一个jsfiddle。下面的代码用于一个图标。你可以移动你的大图像background-position

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

在这里，您有一篇来自 w3Schools 的好帖子，可以更好地了解如何获得您想要的东西