指南针精灵背景位置不是我想要的

时间:2012-06-22 12:11:53

标签: css sass compass-sass css-preprocessor

我是第一次使用Compass spriting。我希望有图标图像(大小各不相同)居中位置。喜欢附图

enter image description here

我正在使用此设置

$icons-spacing:40px;
@import "icons/*.png";
@include all-icons-sprites;

我得到的是(例如)

.icons-adventure {
  background-position: 0 -608px;
}

不是我要求的那样。我想从上到下留出更多的间距。

6 个答案:

答案 0 :(得分:3)

你可能想查看一下这个Github Gist:https://gist.github.com/adamlogic/3577147,它帮助我解决了过去的spriting问题,并且更好地理解了Compass中的spriting是如何工作的。

您特别感兴趣的可能是作者提到以下内容的部分:(如果Gist被删除,请粘贴在此处)

  

“我通过定义自己的(sprite)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; }

答案 1 :(得分:3)

我找到了两个解决这个问题的方法,但都不完美:

  1. 您可以使用必要的填充在图像编辑器中保存图标 - 如果您只想在一个地方使用它,它就可以工作,否则您必须创建重复项(这就是为什么这并不总是有效)。 / LI>
  2. 其他解决方案是使用伪元素。假设您要添加背景的元素,并且您已将图标放在图标文件夹中:
  3. @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);    
    }
    

答案 2 :(得分:1)

$icons-spacing定义分隔生成的精灵图中每个图像的像素数。我相信您要调整$icons-position调整(偏移)生成的background-position样式

答案 3 :(得分:0)

首先,一个好问题......

当您在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;}

这里,不需要高度,因为高度是自动照顾的。让我来一个小提琴,让你得到一个明确的解释。

答案 4 :(得分:0)

如果您知道图标的大小,可以为所有图标设置默认高度,并为单个图标提供垂直偏移(默认高度 - 图标高度)/ 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);

答案 5 :(得分:0)

如果您使用的是Bootstrap 3,请使用以下代码,简单明了,

SASS档案

@import "compass";
$home-spacing : 10px;
$home-sprite-dimensions : true;
@import "web/images/home/*.png";
@include all-home-sprites;

在HTML / Slim文件中,我只使用Twitter Bootstrap 3提供的center-block,我的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;

我希望这对某人有所帮助,