指南针/ Sass背景图像定位

Question

在Compass / Sass中使用精灵时，会得到背景图像和背景位置。

例如：

background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
background-position: 0 -120px;

此背景图像位于元素的左上角。 使用普通的CSS，我可以将其更改为右下角，如下所示：

background-position: right bottom;

然而，当使用精灵时，这不起作用，因为它用于整个精灵，而不是我的精灵中的每个图像。

如何告诉Compass / Sass将我的精灵的每张图片放在右下角而不是左上角？

注意：我正在使用此精灵的元素，高度的变化，所以我不能使用固定的像素值。

感谢。

编辑：我包含这张图片来说明我的意思：

Answer 1

我能够使用我的元素上的：after psuedo类来实现这个目标。 您需要为：after 类提供与图像相等的宽度和高度，并使用CSS定位它。

.element {
  position: relative;
  /* your element css */

  &:after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    width: 60px;
    height: 60px;
    right: 0;
    bottom: 0;
    background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
    background-position: 0 -120px;    
}