和 Facebook野外 CSS 精灵：

suraiyaislamsum

Amazon、Google 和 Facebook。 准备精灵  如果您在网上查找 CSS 精灵的示例，您会发现大多数都针对实际空间的理想使用进行了优化 - 图像之间的间隙保持在最低限度，以便使整个精灵的负载尽可能低。这大大减少了首次下载图像时的加载时间，但它也引入了我们之前提到的那些可怕的图像坐标。那么，为什么不采取稍微不同的方法呢？让我们寻找一种更简单的方法来定位图像，同时确保生成的精灵不会比其各个图像的总和大得多。 让我们尝试不同的布局，而不是尝试以使得生成的精灵尽可能小的方式堆叠图像。我们将构建一个漂亮的正方形网格，而不是随机网格，为一个图像保留每个正方形的空间（尽管较大的图像可能覆盖多个正方形）。目标是能够使用非常简单的数。

学函数来定位每个图像的起点（左上角）。 网格方块的大小取决于您要绘制的图像的平均尺寸。对于我的网站，我使用了 32×32 像素的网格（因为只有一张图像超过此尺寸），但网格大小会根据情况而变化。另一件需要考虑的事情是缩放页面时可能发生的图像渗色；如果 购买电话号码列表 您想安全起见，请为精灵中的每个图像添加一点填充。为了进行额外的优化，您还可以使用矩形网格代替方形网格，进一步减少浪费的空间；虽然有点复杂，但这与我们要做的没有太大不同。不过，在本文中，我们将坚持使用方形网格。 准备精灵：Photoshop 的福利  我不是设计师，所以我不确定本节在 Photoshop 领域之外的适用性如何，但在我们编写实际代码之前，仍然可以进行一些值得注。



意的改进。首先，可视化网格会有很大帮助。Photoshop 有执行此操作的指南（因此您实际上不必在精灵中包含标记），还有一个额外的好处是图层将捕捉到这些指南（使每个单独图像的像素完美定位更加容易）。 不过，手动添加这些指南可能会有些麻烦。幸运的是，我的一位同事（向 Filip Van Tendeloo 致敬）非常好心地编写并分享了一个Photoshop 小脚本，该脚本可以根据正方形的基本尺寸自动构建此参考线网格。很方便，不是吗？只需下载脚本，将其保存在PresetsScripts目录中，然后File → Scripts → Sprite Grid从 Photoshop 菜单中进行选择。 最后，要真正完成任务，您可以向网格的 x 轴和 y 轴添加数字，以便可以轻松地精确定位网格中的每个方块。不过，不要将这些数字添加到实际的精。