Background-image

[IIAIIIA]

Дано:

ссылка, стилизованная под кнопку, может иметь разную высоту

Задача:

для каждого из четырех состояний(link, hover, active, disable) нужно наложить фоновую картинку.

Решение в лоб:

для каждого состояния прописать background с repeat-x и прочими необходимыми параметрами, но есть минус - 4 http-запроса для каждой картинки.

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

Возможно ли решить проблему с помощью этого спрайта?

Edited March 31, 2012 by IIAIIIA

[terminotor]

Можно попробовать вот так _http://adminway.ru/effekt-smeny-kartinki-pri-navedeniya-myshkoi-na-ssylku-c-pomoshchyu-css и поиграться с background-position, возможно выйдет

[IIAIIIA]

Можно попробовать вот так _http://adminway.ru/effekt-smeny-kartinki-pri-navedeniya-myshkoi-na-ssylku-c-pomoshchyu-css и поиграться с background-position, возможно выйдет

вы привели абсолютно бесполезный в данном случае пример:

блок с известными размерами

отсутствие повторения фоновой картинки

тут надо что-нибудь умное придумать

[terminotor]

Можно попробовать вот так _http://adminway.ru/effekt-smeny-kartinki-pri-navedeniya-myshkoi-na-ssylku-c-pomoshchyu-css и поиграться с background-position, возможно выйдет

вы привели абсолютно бесполезный в данном случае пример:

блок с известными размерами

отсутствие повторения фоновой картинки

тут надо что-нибудь умное придумать

не вижу причин, что бы не добавить к примеру "background-repeat: repeat-x" и сделать блоки резиновыми

[Cyanide]

Дано:

ссылка, стилизованная под кнопку, может иметь разную высоту

Задача:

для каждого из четырех состояний(link, hover, active, disable) нужно наложить фоновую картинку.

Решение в лоб:

для каждого состояния прописать background с repeat-x и прочими необходимыми параметрами, но есть минус - 4 http-запроса для каждой картинки.

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

Возможно ли решить проблему с помощью этого спрайта?

Была такая же проблема (http://svetlas.ru/). При изменении высоты кнопки, изображение не растягивалось, а начиналась его прорисовка второй строкой, т.е. градиент был с резким переходом. Решил с помощью background-size:contain;

CSS:

.jqueryslidemenu {
	font: bold 12px Arial, Tahoma, sans-serif;
	height:29px;
	width: 100%;
	margin:0 auto;
	background: url(../img/pic_20.png);
	background-size: contain;
	border-left: 1px solid #778;
}

Кнопки работают везде корректно, кроме IE6-8. также не работает border-radius, а использовать разные хаки для добавления эффектов CSS3 в IE6-8 я не стал. Насколько я знаю, это не рекомендуется.

[IIAIIIA]

не вижу причин, что бы не добавить к примеру "background-repeat: repeat-x" и сделать блоки резиновыми

А вы вникните в суть задачи, попробуйте реализовать и причины появятся сами собой.

Была такая же проблема (http://svetlas.ru/). При изменении высоты кнопки, изображение не растягивалось, а начиналась его прорисовка второй строкой, т.е. градиент был с резким переходом. Решил с помощью background-size:contain;

ну я смотрел различные вариации background, но, взглянув на поддержку браузерами background-size сразу отмел его в сторону. Edited March 31, 2012 by IIAIIIA

[DImas95]

Сделайте спрайт в css, а потом позицонируйте его для каждой ссылки, мне в подобном случае помогло.