建站时，如何将多张小图组合成一张大图？ [关闭]答案

【问题标题】：When building a website, how to combine multiple small images into a big one? [closed]建站时，如何将多张小图组合成一张大图？ [关闭]
【发布时间】：2016-12-26 23:45:22
【问题描述】：

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

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

【问题讨论】：

你需要搜索的词是“CSS sprites”
EG。 css-tricks.com/css-sprites
@Paulpro 谢谢！很有帮助。

标签： javascript image web web-performance

【解决方案1】：

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

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

在这里你有一个很好的来自 w3Schools 的post，以便更好地了解如何获得你想要的东西

【讨论】：

谢谢，这很有帮助！
很高兴听到这个消息:)