用指南针喷精 - 图标应该是相同的尺寸吗？

Question

形成精灵的图标是否应该具有相同的尺寸？

我在div的左上方看到'current-menu'图标，在div里面，看到了sprite里面的图标，这个图标更大。

@import "marker/*.png";
@include all-marker-sprites;

li.current {
    @include marker-sprite(current-menu);
    ...

我做错了吗？

提前致谢。

Answer 1

指南针将所有图像垂直组合，无论其大小如何，都可以整合到一个图像中。然后应计算每个图像的高度并将其指定为背景位置偏移。如果您的li高度为20px而current-menu图标的高度为16px，则会在精灵中看到下一张图片。

您可以将所有图标设置为相同尺寸，也可以使用自定义选项设置间距，位置和重复等内容。 You can read more about it in the Spriting tutorial.