Question

我想知道是否有任何好方法来管理CSS sprites。例如，看一下Google在Play环境中使用的精灵：

Woah, sprites

对我而言，谷歌的开发人员似乎没有“系统”，甚至是追踪正确background-position＆＃39; s使用这个精灵。但是，我不知道如何轻松地和可能地自动跟踪精灵及其图像？建议的方法是什么？从左上角开始，从左到右添加图像，将位置值保存在单独的文件中，还是有其他更好的方法？

Answer 1

这个想法是维护不同的命名图像并将它们“拼接在一起”作为优化。作为自动构建过程的一部分，或手动。就像CSS或JS缩小一样。图片被放置在最终图像上，并自动计算背景位置。

创建这样一个工具非常简单，因此有很多这样的工具。

我个人对手动精灵创建的偏好是Stitches，它是一个在线工具，不需要安装。它运行在当前版本的Chrome上（不确定其他浏览器）。

还有自动构建的解决方案。例如，SmartSprites Maven plugin：

<plugin>
  <groupId>net.jangaroo</groupId>
  <artifactId>smartsprites-maven-plugin</artifactId>
  <version>1.8</version>
</plugin>

Answer 2

我用这个模块做过这种精灵：

全自动，生成带有文件名的css和类。很容易。这是您正在寻找的工具。

编辑：我提到的模块与grunt一起使用，但工具本身就是这个： https://github.com/drdk/dr-svg-sprites