HTML带有图像和文本的超链接

Question

如何让链接看起来像带有文本的按钮？

我们可以使用以下代码制作超链接按钮：

<a href="..."> <img src="button.png" width="100" height="50" alt="Some text"></img> </a>

但是我也需要按钮中央的文本。

谢谢。

- Victor_Z

Answer 1

我建议，不知道您想要什么的情况下，并假设以下标记：

<a href="#"><img src="path/to/image.png" /><span>Some text</span></a>

a {
    position: relative;
    display: inline-block;
}

a span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1em;
    margin-left: -50%;
    width: 100%;
    height: 2em;
    color: #f90;
    background-color: rgba(0,0,0,0.5);
}​

JS Fiddle演示。

- David Thomas

Answer 2

可以通过将按钮设置为背景来实现：

<a href="..." style="text-align:center; background: url('button.png'); width: 100px; height: 50px;">Your text</a>

但我会尽量避免使用有背景图像的按钮（除非它们具有奇怪的形状）。相反，我会尝试使用CSS3。

- Ryan Casas

Answer 3

你可以使用一些UI框架，例如Bootstrap或Flat UI。

<a href="#" class="btn btn-primary"> Click Me</a>

- blossoms