使用CSS背景图片实现内联可伸缩按钮

Question

3

有人知道是否有一种CSS和背景图片的方法，可以将内联链接转换为可视化按钮，并且会根据不同的文本量（或文本大小调整）进行拉伸，同时还需要符合XHTML1.1 strict标准，跨浏览器，无需使用JavaScript吗？

我认为我需要使用背景图片来制作设计师的按钮，因为这些按钮具有不同颜色的圆角边框。它必须在IE6中工作（政府工作）。

我相当确定答案是否定的，但仍然值得检查一下。

除此之外，我已经尝试过滑动门技术的变体，但是由于解决方案需要在行内（即在段落内）工作，并且我无法设置固定宽度，所以无法使其工作。

编辑：有几个按钮，每个按钮的前景色、边框和背景色都不同。它们还有一个渐变的“面孔”，但不需要透明度或其他“非正统”的东西。不幸的是，由于签署了保密协议，我无法链接到示例。

- da5id

如果您实际上链接到按钮应该看起来像什么，以及它应该如何拉伸，如果涉及任何不透明度、透明度或非正统部分，那么您可以节省很多混淆。 - meder omuraliev

如果我造成了任何困惑，我很抱歉。请查看我的编辑。 - da5id

4个回答

1

我认为在您的限制条件下无法完成此操作。问题在于您只有一个元素，但要正确进行伸展，您需要三个元素（未经拉伸的左侧，被拉伸的中心，未经拉伸的右侧）。

- John Fisher

好建议（干杯），但我已经用一个锚点内的单个跨度来完成了。我将回答自己的问题，以防其他人需要这样做。 - da5id

啊，所以你用了两个元素而不是一个。 - John Fisher

0

嗯，你可能需要为此制作image buttons。

- Anthony Mills

谢谢，但是在段落内的表单无法验证。 - da5id

...而且你链接的方法使用了Javascript。 - da5id

只有在尝试附加事件处理程序或花哨的悬停效果时，才需要JavaScript。您能将表单放在段落周围吗？ - Anthony Mills

但它是固定大小的。我需要使按钮能够拉伸。 - da5id

你可以使用图片进行repeat-x，然后将<a>设置为X像素的最小高度。它会随着字母大小而扩展，并且不会变得比您指定的宽度更小。 - Phil

我不能只是设置图像重复，因为有圆角 - 这就是我一开始选择“滑动门”路径的原因。 - da5id

0

- Anthony Mills

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mottie · Accepted Answer

我不确定这是否符合您的需求，但我在这篇帖子中帮助过某人设计了可悬停的圆角按钮... 它仅使用HTML和CSS。