Css精靈和定位

Question

我使用真棒compass style爲我的樣式表生成精靈。我可以生成精靈並將它們用作背景，這一切都可以正常工作。

問題是，以前我用background-position來定位我的背景元素。

比如這裏有一個：

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

包含元素的高度是可變的，這個地方在底部的背景和精美的作品。

但是，如果我切換到指南針精靈並使用@extend .system-bottom-bg;，則background-position屬性用於從精靈圖中獲取圖像的適當位置。

在這種情況下，我該如何使用css sprites，並且仍然能夠將背景放置在元素的底部？

Answer 1

經過進一步研究，似乎由於background-position的限制，這是不可能的。這裏列出了一個不錯的CSS sprites缺陷清單：http://www.onderhond.com/blog/work/css-sprites-pros-and-cons。

由於background-position用於定義圖像在精靈表中的位置，因此我們不能用它來定義精靈表部分在頁面上的顯示方式。上面鏈接的文章提供了一些可能在未來實施的解決方案。

一種可能的解決方案是將圖像作爲精靈表中的最後一項，然後在該圖像和前一圖像之間插入大量的空間。顯然，這不是一個很好的解決方案，但是鑑於指南針不允許我們在精靈表中設置圖像的位置，所以這是不可能的。

我的解決方案是更改我的標記，以便不需要設置background-position: left bottom，我可以將精靈圖像設置爲背景圖像。