Помогите с автоматическим изменением размера фонового изображения

Question

Есть ли способ автоматического изменения размера фонового изображения элемента.Например, в моем html я хотел бы, чтобы мои ссылки имели фоновое изображение.Изображение имеет скошенную левую и правую границу и закругленные верхние углы.

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

Есть ли у вас какие-либо решенияза это?Спасибо!

Answer 1

Существует довольно стандартный способ достижения этого с использованием 2 элементов.

<a href="foo.html" class="button"><span>Button Text</span></a>

Как вы можете видеть, вы помещаете в свою ссылку промежуток, который будет кнопкой.Изображение, которое вы используете, нужно будет разделить на 2 части: левую, среднюю часть кнопки и правую.Вы установите диапазон, который будет иметь широкую левую сторону изображения кнопки.Ссылка будет содержать правую часть кнопки.Css должен выглядеть примерно так:

a{
 background: url("rightimg.png") right no-repeat;
 display:block;
 padding-right: [width of image];
 width:auto;
 height:[height of image];
 line-height:[height of image]
}
a span{
 background: url("leftimg.png") left no-repeat;
 display:block;
 width:auto;
 height:[height of image];
 line-height:[height of image]
}
a{
 background: url("rightHover.png") right no-repeat;
}
a span{
 background: url("leftHover.png") left no-repeat;
}

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

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

Я бы порекомендовал сделать левое изображение шириной более 200 пикселей, чтобы обеспечить большое пространство для расширения.

Answer 2

Я просто хочу узнать, как использовать эту технику для кнопки формы.

, учитывая тот факт, что я не могу добавить тег-обертку вокруг метки ввода, так как он получаетгенерируется из библиотеки.Но у меня есть имена классов и идентификаторов, доступные для входного тега.

Answer 3

РЕДАКТИРОВАТЬ: Приведенное выше решение Джонатана Парка было бы наилучшим, если рассматриваемые якорные теги являются элементами меню (например, «вкладки» или «кнопки»). Перечитав ваш вопрос, я полагаю, что это так.

Вы можете достичь описанного эффекта с помощью свойств CSS3 background-size или border-image . Однако я не уверен, как браузеры обрабатывают эти свойства, когда соответствующий элемент встроен и переносится в две или более строки. Кроме того, свойство background-size, скорее всего, приведет к нежелательному искажению изображения.

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

Answer 4

Знаете ли вы размер вашего фонового изображения?

a
{
  background: #ffffff url('yourimage.gif') no-repeat 0 0;
  display: block;
  width: XXXpx;
  height: YYYpx;
}

CSS не может выполнять вычисления, это способ применения стиля к странице.

Но если вы этого не сделаетеСпециально не устанавливайте высоту и ширину, и вы не включаете «display: block», ваше изображение будет шириной текста вашего «a href».

a
{
  background: #ffffff url('yourimage.gif') no-repeat 0 0;
}