Compass/Sass 背景图像定位答案

【问题标题】：Compass/Sass background-image positioningCompass/Sass 背景图像定位
【发布时间】：2013-08-15 14:33:43
【问题描述】：

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

例如：

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

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

background-position: right bottom;

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

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

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

谢谢。

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

【问题讨论】：

你能澄清一下这会有什么用吗？ background-position 属性偏移量是从左上角开始的（除非浏览器支持 4 值语法：developer.mozilla.org/en-US/docs/Web/CSS/background-position）。
我在我的问题中添加了一张图片来说明这如何有用。默认在左边，我要在右边完成。
你能手动写出 CSS 来使它与你的 Compass 生成的精灵一起工作吗？从 CSS 的角度来看，我不明白您的要求是如何实现的。

标签： sass background-image compass-sass css-sprites background-position

【解决方案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;    
}

【讨论】：