我正在使用真棒compass style为我的样式表生成精灵。我可以生成精灵并将它们用作背景，这一切都很好。
问题在于我之前使用background-position将背景定位在元素中。
例如，这是一个：
background: left bottom url('../images/bottom-bg.png) no-repeat;
包含元素的高度是可变的，这会将背景放在底部并且工作得很漂亮。
但是，如果我切换到罗盘精灵并使用@extend .system-bottom-bg;，background-position属性将用于从精灵地图中获取图像的适当位置。
在这种情况下，我如何使用css sprites并仍能将背景放在元素的底部？
答案 0 :(得分：1)
经过进一步研究，似乎由于background-position的限制，这是不可能的。这里概述了CSS精灵的不足之处：http://www.onderhond.com/blog/work/css-sprites-pros-and-cons。
由于background-position用于定义图像在精灵表中占据的位置，因此我们无法使用它来定义精灵表中该部分将如何出现在页面上。上面链接的文章提供了一些可能在未来实施的解决方案。
一种可能的解决方案是将图像作为精灵表中的最后一项，然后在此图像和上一图像之间插入大量空间。显然这不是一个非常简洁的解决方案，但鉴于指南针不允许我们在精灵表中设置图像的位置，无论如何这是不可能的。
我的解决方法是更改标记，以便不需要设置background-position: left bottom，我可以将精灵图像设置为背景图像。