css - 是否有根据 css 生成图像精灵的繁重任务？

Question

假设我有以下 style.css 文件：

h1 {
  padding: 10px;
  background: url('/img/header.png');
}
p {
   background: url('/img/p.png');
}

我需要自动为这个 css 制作图像精灵。我需要得到这样的东西：

h1 {
  padding: 10px;
  background: url('/img/sprite.png') -47px 0;
}
p {
   background: url('/img/sprite.png') -130px 0;
}

是否可以通过使用 grunt 任务自动制作？

score 8 · Accepted Answer

看起来您正在寻找这个grunt-sprite-generator。从文档中：

Grunt 任务从样式表中引用的图像生成精灵，然后使用新的精灵图像和位置更新引用

另一个看起来符合要求的工具是grunt-spritesmith

score 3 · Accepted Answer

3

使用Grunt Imagine怎么样？

于 2013-04-07T15:53:39.727 回答

2 回答 2