Javascript 帮助自动调整背景图像的大小

是否有一种方法可以自动调整元素背景图像的大小。例如，在我的html中，我希望我的链接有一个背景图像。图像具有倾斜的左右边框和圆形的顶角

通常可以指定锚元素的宽度以适应背景图像。我的问题是宽度应该是动态的，如果链接的宽度小于图像的宽度，背景图像也应该调整。。有点像另一种方式

你有什么解决办法吗？

---

谢谢

有一种相当标准的方法可以使用两种元素来实现这一点

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

Yo需要在css中对此进行调整，使其适合您的特定布局

左侧图像位于范围内的原因是，如果按钮上有任何透明度，则不必重叠图像。在剪切图像时请记住这一点

---

我建议将左侧图像的宽度设置为200px以上，以留出较大的扩展空间。

您知道背景图像的大小吗

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

CSS无法进行计算，它是将样式应用于页面的一种方式

但是，如果您没有特别设置高度和宽度，并且您取消了“display:block”，那么您的图像将是“a href”文本的宽度

---

编辑：如果所讨论的锚定标签是菜单项（例如“标签”或“按钮”），乔纳森·帕克的上述解决方案将是最好的。在重读你的问题之后，我认为情况就是这样

您可以使用CSS3或属性实现所描述的效果。但是，当所涉及的元素是内联的并换行到两行或更多行时，我不确定浏览器如何处理这些属性。此外，“背景大小”属性很可能会不希望地扭曲图像

---

注意，也可以在没有图像的情况下实现这一点。你能在你的锚定标签周围贴一张你想要创建的形状的图片吗？

我只是想知道如何在表单按钮上使用这种技术

---

由于输入标签是从库中生成的，所以我无法在输入标签周围添加包装器span标记。但我确实有可用于输入标记的类和id名称。

啊，好的古老“滑动门”技术！它通常工作得很好。@Josua：我实际上是从相反的方向学的，里面的元素是滑动门。当我停止使用jpg图像并开始使用透明PNG时，我很快发现这是一种痛苦。

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

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