Css спрайты и позиционирование - PullRequest
Новая
       6

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

2 голосов
/ 23 марта 2012

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

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

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

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

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

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

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

1 Ответ

1 голос
/ 23 марта 2012

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

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

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

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

...