css - 使用 msbuild 创建 CSS 精灵？

Question

有没有人见过工具，甚至是从现有网站的图像生成 css sprites 的过程概念，以及在构建过程中的 css？

我应该认为步骤是：

1. 遍历图像目录
2. 从该目录中的所有图像创建单个精灵文件
3. 对于每个图像
4. 使用该图像查找任何 CSS 类
5. 更新 css 类以使用新的 sprite 文件

我将使用 asp.net，所以 msbuild 中的某些东西会很棒。然而，我什至在接近的时候发现很少。

Answer 1

您可以使用这个http://spritegen.website-performance.org/这是 BSD 许可代码。（请参阅右侧的下载链接。）

Answer 2

只有当您有一些简单的图像时，这样的自动过程才能很好地工作。手动执行该过程有几个原因：

某些图像格式比其他图像格式更适合精灵。如果您尝试使用 JPEG 图像制作精灵，压缩将很容易从一张图像流向另一张图像，从而导致伪影。像 GIF 和 8 位 PNG 这样的索引颜色格式的颜色数量是有限的，因此如果将具有太多不同调色板的图像放在一起，您将失去颜色。

您可能希望水平或垂直重复图像，这使得组合精灵图像变得更加困难。

如果图像小于您使用它的元素，则必须使用透明像素填充图像。如果元素的大小以任何方式是动态的，那么自动过程甚至不知道图像需要多少填充。