使用雪碧图自动化工具，是不是要求构建前的图片背景不得设置background-position?

[stoneChen]

您好，我好久前就想做这个事情了，这次终于提上日程了。试用了一下您的这个grunt插件，效果很赞！

之前还试过grunt-spritesmith,它的效果是，不修改原css，新生成一个css,内容是一批根据原来独立图片的名字命名的类选择器（可带前缀），并设置width,height,background-position等属性，相信您肯定了解这个结果。一看到这个结果，就想到，这些选择器是需要被调用的，也就是说，这个构建过程应该是发生在开发页面之前的。而且，这些选择器肯定是要用在一个“额外的小元素”上的。

而我之前的预期想法是，雪碧图自动化工具应该是在（使用独立图片背景）所有页面开发完毕后，再运行的，再经过适当的拷贝，合并等构建操作完成完整的独立背景 ->雪碧图背景的转化。

嗯，您的这个grunt插件，实现了我预期的一部分（或者说，我上述想法的另一部分是不合理的）。在原来css的基础上，替换背景地址（即新的all.png）,并设置相应的background-position。这就意味着，在使用独立背景时设置的background-position将被覆盖而失效，从而导致使用合并后的雪碧图，背景坐标错乱。那么进一步想到，这种自动化思路依然要求，在使用独立背景开发页面的时候，也必须使用一个“额外的小元素”,并且设置高宽与背景一样大小，不能设置background-position(或者说其值必须为0,0)。

举个例子：

上图为构建前，使用独立背景开发的，表现很正常。再看：

上图为构建过的同一个元素的样式，就发生背景错乱了。原因也很明显。

一言以蔽之，使用您的这个插件，要求构建前的独立背景，必须用在一个正好包含背景的一个“额外的小元素”上,对吗？

[stoneChen]

即使原来使用独立背景时，background-position是0,0, 如果该元素高宽比背景本身大很多，那么在使用雪碧图后，“隔壁”的背景会错误的出现在该元素上。所以还是必须要用这个“额外的小元素”。您说是吗？

[laoshu133]

我们这里和 grunt-spritesmith 解决的其实是两个方向的问题；
关于你的另一个问题，请参见 #27

[stoneChen]

@laoshu133
嗯，的确是两种不同的解决思路，grunt-spritesmith是先合并出雪碧图，再开发（调用生成的class即可），grunt-css-sprite是先开发再合并出雪碧图（修改css代码，添加background-position），各有优劣。但共同点是，都要求使用背景的元素高宽等于背景本身的高宽（适当大于也可以，看场景）。昨天折腾一下午，把grunt-css-sprite整合进构建流程。但后来还是觉得grunt-spritesmith的方式更加直观，更加接近最终效果，开发页面时，不需要每次都手动设置应用背景元素的高宽（生成的css里已经全部自动化设置好）。构建时，只需简单copy+cssmin即可。

可能我这边的场景更适合grunt-spritesmith吧，@laoshu133 的插件也很棒，谢谢分享。