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

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; 
} 

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

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

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

Answer 2

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

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; 
} 

Answer 3

EDIT: решение Джонатан Парка выше было бы лучше, если якорь теги в вопросе пункты меню (например, «язычки» или «кнопка»). Перечитав ваш вопрос, я предполагаю, что это так.

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

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

Answer 4

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

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