sass - Compass/Sass 背景图像定位

Question

在 Compass/Sass 中使用 sprite 时，会生成一个背景图像和一个背景位置。

例如：

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

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

background-position: right bottom;

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

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

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

谢谢。

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

Answer 1

我能够在我的元素上使用:after伪类来实现这一点。您需要为: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;    
}