CSS精灵和定位答案

【问题标题】：Css sprites and positioningCSS精灵和定位
【发布时间】：2012-03-23 14:02:43
【问题描述】：

我正在使用很棒的compass style 为我的样式表生成精灵。我可以生成精灵并将它们用作背景，一切正常。

问题是我之前使用background-position 将我的背景定位在一个元素中。

例如这是一个：

background: left bottom url('../images/bottom-bg.png) no-repeat;

包含元素的高度是可变的，这将背景放在底部并且效果很好。

但是，如果我切换到指南针精灵并使用@extend .system-bottom-bg;，则background-position 属性用于从精灵地图中获取图像的适当位置。

在这种情况下，我怎样才能使用 css sprites 并且仍然能够将背景定位在元素的底部？

【问题讨论】：

【解决方案1】：

经过进一步研究，似乎由于background-position的限制，这是不可能的。此处概述了 CSS sprite 的不足之处：http://www.onderhond.com/blog/work/css-sprites-pros-and-cons。

由于background-position 用于定义图像在精灵表中占据的位置，我们不能使用它来定义精灵表的该部分在页面上的显示方式。上面链接的文章提供了一些可能在未来实施的解决方案。

一种可能的解决方案是将图像作为精灵表中的最后一项，然后在此图像和前一个图像之间插入大量空间。显然这不是一个非常简洁的解决方案，但鉴于 compass 不允许我们在 sprite sheet 中设置图像的位置，无论如何这是不可能的。

我的解决方案是更改我的标记，这样就不需要设置background-position: left bottom，我可以将精灵图像设置为背景图像。

【讨论】：