Question

有没有办法自动调整元素的背景图像。例如，在我的HTML中，我希望我的链接有一个背景图像。图像具有倾斜的左右边界和圆顶角。

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

你有解决方案吗？谢谢！

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中调整它以使其适合你的特定布局。

左图像位于跨度中的原因是，如果按钮上有任何透明度，则不必重叠图像。切割图像时请记住这一点。

我建议将左侧图像宽度设置为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

编辑：如果所讨论的锚标签是菜单项（例如“标签”或“按钮”），Jonathan Park的上述解决方案将是最佳选择。在重新阅读你的问题之后，我认为就是这种情况。

您可以使用CSS3的background-size或border-image属性来实现所描述的效果。但是，当涉及的元素是内联并包装到两行或更多行时，我不确定浏览器如何处理这些属性。此外，background-size属性很可能会不合时宜地扭曲您的图像。

请注意，也可以在没有图像的情况下实现此目的。您可以在锚标记周围发布您想要创建的形状的图像吗？

Answer 4

我只是想知道如何将此技术用于表单按钮。

鉴于我无法在输入标签周围添加包装器span标签，因为它是从库生成的。但我确实有输入标签的类和ID名称。

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

4 个答案: