Блог

возможно ли повторить только правую сторону изображения. Если у меня есть изображение кнопки меню, с левой стороны есть граница или полоса, и я хочу повторить только правую сторону (без границы).

Когда я просто помещаю repeat-x scroll right или просто repeat-x , вся картинка будет повторяться, но я хочу, чтобы повторялась только правая сторона, а не левая или вся картинка целиком.

Я надеюсь, вы понимаете, что я имею в виду.

Это пример кнопки. Когда заголовок моей кнопки слишком длинный, и ему нужно будет повторить изображение кнопки. Могу ли я повторить только эту желтую часть изображения? не вместе с красным. PS! Не удается повторить цвет, потому что кнопка сделана с использованием cradient.

Короткий ответ, нет, это невозможно.

Изображение имеет фиксированную ширину, и вы не можете растянуть только его часть.

Решение: используйте две картинки, одну для левой стороны, фиксированного размера, а другую для правой стороны, которую вы можете использовать repeat-x для заполнения оставшегося пространства.

Редактировать:

Если ваша кнопка имеет горизонтальный градиент, лучшее, что вы можете сделать, это сделать изображение достаточно широким, чтобы охватить «почти» все случаи. Ключевое слово здесь — почти, потому что вы всегда можете найти кого-нибудь с экраном шире, чем само изображение.

Не уверен, почему вы не можете использовать сплошной цвет, но почему бы просто не использовать изображение шире?

просто поместите «без повтора вверху справа», это то, что вы имеете в виду

В журнале Smashing Magazine есть отличное руководство по разработке кнопок с помощью CSS:

http://www.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/

Прокрутите вниз до раздела «Раздвижные двери: гибкие кнопки», там точно объясняется, что вы ищете.