指南针精灵背景相对于元素的定位？答案

【问题标题】：Compass sprite background positioning relative to the element?指南针精灵背景相对于元素的定位？
【发布时间】：2012-10-20 03:41:14
【问题描述】：

我正在努力寻找一个好的解决方案，据我所知，指南针页面上没有任何内容。

问题：滑动门样式 css 背景。

使用垂直样式表，我可以为我的背景精灵获取两侧没有任何内容的图像。

对于我的标题的左侧，我只是简单地包含精灵：

    @include header-plain-blue-left;
// will give me
  background-position: 0 -903px;

然后 compass 生成 CSS，它非常适合。问题出现在右侧，我想要的是与元素右侧对齐的精灵，据我所知，指南针不允许这样做。

想要的输出是：

  background-position: right -903px;

我唯一让它工作的是创建一个 mixin 并明确声明背景文件名和位置：

@mixin header-plain-blue-right {
     background: url(../images/sprites-s2ba933e4ea.png) no-repeat right -346px;
     }

这很麻烦，也不是很时髦……

有没有人知道如何让指南针做到这一点？我错过了什么明显的东西吗？或者有人知道插件吗？

或者，如果有一种方法可以控制首先将哪个图像添加到地图中（以及因此在 spritemap 中的顺序），那可以使添加内容变得更加容易......

【问题讨论】：

【解决方案1】：

*更新：误报。这在 Firefox 中不起作用。所以没用。 *

所以，过了太久了。我已经意识到这样做的超级简单方法。我不敢相信我没有早点得到。

对于遇到此问题的其他人。真的太*简单了。

@include header-plain-blue-left;
background-position-x: right;

这个简单的 css 规则将覆盖为 x 生成的罗盘定位。而且，作为奖励，如果您需要相对于 spritemap（偏移）定位精灵，指南针也有一个功能：

     @include <folder>-sprite-position(<sprite>, $offset_x, $offset_y)

我希望至少有人觉得这很有帮助！

【讨论】：

请注意background-position-x 是一个非标准属性，仅适用于 IE 和 Chrome。最好使用标准的background-position。
是的。刚刚遇到这个浏览器测试。火狐讨厌它。废话。

【解决方案2】：

以下内容适用于所有浏览器

@include sprite-background-position($sprite, tab, 100%, 0);

100% 值与“正确”定位相同。

【讨论】：