CSS 精灵管理

Question

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

Google 的开发人员没有 'system'，甚至没有跟踪正确 background-position 的工具，这对我来说似乎是不可能的使用这个精灵。但是，我不知道如何轻松且可能自动跟踪精灵及其图像？推荐的方法是什么？从左上角开始，从左到右添加图像，将位置值保存在单独的文件中，还是有其他更好的方法？

Answer 1

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

https://www.npmjs.com/package/grunt-dr-svg-sprites

全自动，生成带有文件名的css和类。非常简单。这就是您正在寻找的工具。

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

Answer 2

想法是维护不同命名的图像，并"stitch them together"作为优化。作为自动构建过程的一部分，或手动构建。就像 CSS 或 JS 缩小。图片放置在最终图像上，并自动计算背景位置。

创建这样的工具非常简单，因此市面上有很多此类工具。

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

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

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

CSS 精灵管理

CSS sprites management

css

css-sprites

background-image