我是第一次使用 Compass spriting。我想让图标图像(大小都略有不同)居中。像附图一样
我正在使用这个设置
$icons-spacing:40px;
@import "icons/*.png";
@include all-icons-sprites;
我得到的CSS是(例如)
.icons-adventure {
background-position: 0 -608px;
}
这不是我所要求的。我想从顶部和左侧提供更多间距。
我是第一次使用 Compass spriting。我想让图标图像(大小都略有不同)居中。像附图一样
我正在使用这个设置
$icons-spacing:40px;
@import "icons/*.png";
@include all-icons-sprites;
我得到的CSS是(例如)
.icons-adventure {
background-position: 0 -608px;
}
这不是我所要求的。我想从顶部和左侧提供更多间距。
我为这个问题找到了两种解决方法,但都不完美:
@import "icons/*.png"; el { position: relative; } el:after { content: ""; position: absolute; left: 50%; top: 50%; @include icons-sprite(some_icon); margin-top: - round(icons-sprite-height(some_icon) / 2); margin-left: - round(icons-sprite-width(some_icon) / 2); }
您可能想查看这个 Github Gist:https : //gist.github.com/adamlogic/3577147,它帮助我解决了过去的精灵问题,也更好地了解了 Compass 中精灵的工作原理。
您可能特别感兴趣的是作者提到以下内容的部分:(粘贴在此处以防删除要点)
“我通过定义我自己的(精灵)mixin 更进一步。”
$spritemap-spacing: 50px
@import "spritemap/*.png"
=background-sprite($name, $repeat: no-repeat, $offset-x: 0, $offset-y: 0)
background-image: $spritemap-sprites
background-repeat: $repeat
+sprite-background-position($spritemap-sprites, $name, $offset-x, $offset-y)
// if no offsets given, set the dimensions of the element to match the image
@if $offset-x == 0 and $offset-y == 0
+sprite-dimensions($spritemap-sprites, $name)
“以及我如何使用它”
// simplest case; sets the background image and dimensions of the element
h3
+background-sprite(ribbonfull)
// custom offset; does not set the dimensions of the element
h2
+background-sprite(ribbonend, no-repeat, 3px, 22px)
// repeating backgrounds are possible, too
#positions
+background-sprite(doubleline, repeat-x, 0, 45px)
而且,作者生成的 CSS:
h3 {
background-image: url('/images/spritemap-sb826ca2aba.png');
background-repeat: no-repeat;
background-position: 0 -405px;
height: 29px;
width: 295px; }
h2 {
background-image: url('/images/spritemap-sb826ca2aba.png');
background-repeat: no-repeat;
background-position: 3px -296px; }
#positions {
background-image: url('/images/spritemap-sb826ca2aba.png');
background-repeat: repeat-x;
background-position: 0 -751px; }
$icons-spacing
定义在生成的精灵图中分隔每个图像的像素数。我相信你想调整$icons-position
哪些调整(偏移)生成的background-position
样式
首先,一个好问题...
当您在 CSS 中提供精灵时,您将能够使用.image-name
. 这就是指南针精灵的工作方式。您的图像将附加到一个大精灵图像中,所有不规则图像将以网格方式组合在一起。
尽管$icons-spacing
使您能够为网格提供一些填充,但在这种情况下放置它并不容易。因此,继续生成生成的内容,我们将执行以下操作。
因此,如果您想要类似图片的内容,则需要将元素居中,该元素具有 Compass 生成的类。
现在说,你有adventure.png
它并且它已经生成了这个类:
.icons-adventure {
background-position: 0 -608px;
}
现在,如果你想让它居中,你可以这样做。
<div class="border">
<i class="icons-adventure"></i>
</div>
对于border
课程,请提供填充。所以,我的意思是,你已经.border
将.icons-adventure
. 现在,你需要给它一些填充和宽度。
.border {padding: 15px; width: 40px;}
在这里,不需要高度,因为高度是自动处理的。让我来一个小提琴给你一个清楚的解释。
如果您使用的是 Bootstrap 3,只需使用以下代码,它简单干净,
SASS 文件
@import "compass";
$home-spacing : 10px;
$home-sprite-dimensions : true;
@import "web/images/home/*.png";
@include all-home-sprites;
在 HTML/Slim 文件中,我只使用center-block
Twitter Bootstrap 3 提供的,我的 HTML 助手,
=content_tag('div','',:class=>'home-save_money center-block')
基本上它只是将图像居中对齐到 div 的中心,上面的所有答案都使用一些自定义 Mixins 或 hack。
PS:即使你不使用 twitter bootstrap,只要使用下面的 CSS,就可以了,
display: block;
margin-left: auto;
margin-right: auto;
我希望这可以帮助别人,
如果您知道图标的大小,您可以为所有图标设置默认高度,并为单个图标提供(默认高度 - 图标高度)/2 的垂直偏移,并以水平居中放置:
$sprite-spacing: 50px;
@import "compass/utilities/sprites";
@import "sprite/*.png";
@include all-sprite-sprites;
$sprite: sprite-map("sprite/*.png", $spacing: 50px);
@include sprite-sprite(myicon);
@include sprite-background-position($sprite, myicon, center, 12px);