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

Question

有没有办法自动调整元素背景图片的大小。例如，在我的 html 中，我希望我的链接具有背景图片。图像具有倾斜的左右边框和圆顶 Angular 。

通常会指定 anchor 元素的宽度以适应背景图像。我的问题是宽度应该是动态的，如果链接的宽度小于图像的宽度，背景图像也应该调整。有点像反过来做。

您对此有什么解决方案吗？ 谢谢!

Answer 1

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

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

如您所见，您在链接中放置了一个跨度，您将成为按钮。您正在使用的图像需要分成两部分，一部分是按钮的左侧和中间部分，另一部分是右侧。您将设置包含的跨度以具有按钮图像的宽左侧。该链接将包含按钮的右侧。 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 像素以上，以留出大量扩展空间。