Можно ли переопределить ОДНУЮ ось CSS-фона, используя CSS? - PullRequest
2 голосов
/ 26 марта 2012

Я использую спрайты CSS для создания меню из шести вкладок. Поскольку вкладки перекрываются, я решил использовать шесть версий изображения в спрайте, по одной для каждого активного состояния вкладки (одна под другой). Поэтому мне нужно изменить более одной вкладки для каждого состояния из-за смежных перекрытий, поэтому я мог бы просто изменить положение всех из них.

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

То, что я хотел бы сделать, это добавить класс к телу, который изменит положение по вертикали всех фонов ссылок без необходимости определять горизонтальный так, чтобы горизонтальный позиция может быть унаследована. Таким образом, мне нужно только определить еще шесть классов, чтобы заставить его работать, вместо шести из них для каждого состояния (= 36).

Некий эквивалент background-position:inherit -94px.

Я легко могу сделать это с помощью jQuery, но надеялся на решение только для CSS.

enter image description here

1 Ответ

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

Нет, это не может быть сделано.Главным образом потому, что Firefox не поддерживает background-position-x и background-position-y, хотя и понятно, потому что это не входит в спецификации.

У меня была эта проблема недавно, но краткое исследование показало, что это все еще невозможно.

Я собираюсь предположить, что у вас есть спрайт, который вы хотите использовать для нескольких состояний меню.В этом случае вам просто нужно разделить спрайт на 2, один для состояния a и один для состояния b, а когда вы добавляете класс, вы просто переключаетесь на изображение b с background-image.

Конечно, это еще одно изображение, но на самом деле не существует кросс-браузерного способа просто сместить одну ось.

...