Css спрайты и позиционирование

Question

Я использую awesome compass style для создания спрайтов для моих таблиц стилей. Я могу создавать спрайты и использовать их в качестве фона, которые все работают нормально.

Проблема в том, что ранее я использовал background-position для размещения моих фонов в элементе.

Например, вот один:

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

Высота вмещающего элемента является переменной величиной, и это ставит фон на дно и прекрасно работает.

Однако, если я переключаюсь на компас спрайты и использую @extend .system-bottom-bg;, свойство background-position используется для захвата соответствующего положения изображения с спрайт-карты.

В таком случае, как я могу использовать спрайты css и все еще иметь возможность расположить фон в нижней части элемента?

Answer 1

При дальнейших исследованиях кажется, что из-за ограничений background-position это невозможно. Очерченный список недостатков с CSS спрайтами описан здесь: http://www.onderhond.com/blog/work/css-sprites-pros-and-cons.

Поскольку background-position используется для определения положения, которое занимает изображение на листе спрайта, мы не можем использовать его для определения того, как эта часть листа спрайтов появится на странице. В приведенной выше статье предлагаются некоторые решения, которые могут быть реализованы в будущем.

Одним из возможных решений является поместить изображение в качестве последнего элемента в лист спрайта, а затем вставить огромное пространство между этим изображением и предыдущим изображением. Очевидно, это не очень четкое решение, но, учитывая, что компас не позволяет нам устанавливать положение изображений внутри листа спрайта, это все равно невозможно.

Мое решение заключалось в изменении моей разметки, так что настройка background-position: left bottom не требуется, и я могу просто установить изображение спрайта в качестве фонового изображения.