我使用Compass(一个CSS框架)来生成精灵图像。
它工作，但指南针只为每个图像生成一个背景位置。
它工作，但指南针只为每个图像生成一个背景位置。
是否可以获得sprite中每个图像的宽度和高度？
这是我的代码：
@import "ico/*.png"; @include all-ico-sprites;
.ico-sprite,.ico-bag-blue,.ico-bag-black {
background: url('../images/ico-s78b1a1919b.png') no-repeat;
}
.ico-bag-blue {
background-position: 0 0;
}
.ico-bag-black {
background-position: 0 -24px;
}
代码我想有：
.ico-sprite,.ico-bag-black {
background: url('../images/ico-s78b1a1919b.png') no-repeat;
}
.ico-bag-blue {
background-position: 0 0;
width:40px;
height:24px;
}
.ico-bag-black {
background-position: 0 -24px;
width:44px;
height:30px;
}
任何人都可以向我解释我该怎么做？
谢谢。
解决方法
这工作：
@include all-<map>-sprites(true);
但是，您可能需要考虑使用配置变量的文档化方式：
http://compass-style.org/help/tutorials/spriting/
您只需在导入之前指定config变量。在你的情况下：
$ico-sprite-dimensions: true; @import "ico/*png". @include all-ico-sprites;
发送真正的所有包括作品，但因为它是无证的，似乎配置变量是首选的方法。
除了维度，这些是可用的其他配置变量：
$<map>-spacing // space in px around the sprites $<map>-repeat // whether to repeat the sprite bg $<map>-position // the x position of the sprite on the map $<map>-sprite-base-class // the base class (default ".<map>-sprite") $<map>-clean-up // whether to delete old image maps $<map>-<sprite>-spacing // spacing,for individual sprites $<map>-<sprite>-repeat // repeat,for individual sprites $<map>-<sprite>-position // position,for individual sprites
