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

Posted 2023-03-07

【中文标题】指南针精灵背景位置不是我想要的

【英文标题】：Compass sprite background position is not as i want it

【发布时间】：2012-06-24 17:39:24

【问题描述】：

我是第一次使用 Compass spriting。我想让图标图像（大小都略有不同）居中。喜欢附图

我正在使用这个设置

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

我得到的 css 是（例如）

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

这不是我所要求的。我想在顶部和左侧留出更多间距。

【问题讨论】：

你能用纯 CSS 给我看“我想要这个”的例子吗？

【参考方案1】：

您可能想查看这个 Github Gist：https://gist.github.com/adamlogic/3577147，它帮助我解决了过去的精灵问题，并更好地了解了 Compass 中精灵的工作原理。

您可能特别感兴趣的是作者提到以下内容的部分：（粘贴在此处以防 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; 

【讨论】：

我认为这是这里最有用的答案。非常感谢 - 它不是本机指南针功能，但它可以满足本主题的要求。

【参考方案2】：

我为这个问题找到了两种解决方法，但都不完美：

您可以简单地将图标保存在图像编辑器中并使用必要的填充 - 如果您只想在一个地方使用它，它可以工作，否则您必须创建重复项（这就是为什么这并不总是有效的原因）。 其他解决方案是使用伪元素。假设是您要添加背景的元素，并且您已将图标放在图标文件夹中：

@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);    

【讨论】：

我也遇到了伪元素解决方案。不过，这仅适用于容器，不适用于例如容器。输入字段。

【参考方案3】：

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

【讨论】：

如何给垂直图标位置？

垂直图标定位似乎不可用。不过看看ctrlaltdel的回答，问题就解决了。

【参考方案4】：

首先，一个好问题...

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

这里不需要高度，因为高度是自动计算的。让我来一个小提琴给你一个清楚的解释。

【讨论】：

我不想为了让精灵居中而添加额外的 div 元素。我知道我可以在没有额外 div 的情况下手动执行此操作，但想知道如何使用指南针获取它。

@JitendraVyas 只有these 是您可以使用 Compass 自定义的可能值。最佳值是$icons-spacing。

是的，我知道 $icons-spacing 但它只适用于水平间距。以前也提到过这个

【参考方案5】：

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

【参考方案6】：

如果您使用的是 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;

希望对大家有所帮助，