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

是否有自动调整元素背景图片大小的方法？例如，在我的html中，我想让我的链接具有背景图像。图像倾斜了左右边框和圆顶角。帮助自动调整背景图片的大小

通常会指定一个锚点元素的宽度来容纳背景图片。我的问题是这个宽度应该是动态的，并且如果链接的宽度小于图像的宽度，背景图像也应该调整..有点像是以相反的方式做它..

对此有任何解决方案吗？？谢谢！

2010-07-27 r2b2

有一个相当标准的方法来实现这个使用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像素以上的左图像以允许大量的扩展空间。

来源

2010-07-27 16:28:40

啊，好老的“推拉门”技术！它通常工作得很好。 – Joshua 2010-07-27 16:35:03

@Josua：我实际上在内部元素是滑动门的情况下学到了这种技巧。很快发现，一旦我停止使用jpg图像并开始使用带有透明度的png，这是一种痛苦。 – 2010-07-27 17:01:31

和每一个：谢谢你的答复。这工作！ – r2b2 2010-07-28 05:11:03

你知道背景图片的大小吗？

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

来源

2010-07-27 16:32:44 NinjaCat

编辑：以上乔纳森公园的解决方案是最好的，如果有问题的锚标签的菜单项（例如，“标签”或“按钮”）。重读你的问题后，我认为是这样。

您可能可以通过CSS3的background-size或border-image属性实现所述效果。但是，我不确定当涉及的元素是内联的并且包装成两行或多行时，浏览器如何处理这些属性。此外，背景大小的属性很可能会使您的图像不合需要地倾斜。

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

来源

2010-07-27 16:35:59 peterjmag

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

鉴于因为它越来越从文库中产生的，我不能添加围绕输入标签的包装span标记。但我确实有类和id名称可用于输入标记。

来源

2011-01-27 06:48:06 user5858

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

回答

相关问题