带有图像和文本的 HTML 超链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11347710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Hyperlink with Image AND Text
提问by Victor_Z
Is it possible to make hyperlink looked like button WITH text on it?
是否可以使超链接看起来像带有文字的按钮？
We can make hyperlink button with code:
我们可以用代码制作超链接按钮：
<a href="..."> <img src="button.png" width="100" height="50" alt="Some text"></img> </a>
but i need also TEXT in the center of button.
但我还需要按钮中心的文本。
Thanks.
谢谢。
回答by Ryan Casas
It's possible by setting the button as a background:
可以通过将按钮设置为背景：
<a href="..." style="text-align:center; background: url('button.png'); width: 100px; height: 50px;">Your text</a>
But I would try to avoid buttons with background images (unless they were a strange shape). Instead, I would try to use CSS3.
但我会尽量避免带有背景图像的按钮（除非它们是奇怪的形状）。相反，我会尝试使用 CSS3。
回答by David says reinstate Monica
I'd suggest, without knowing exactly what you want, and assuming the following mark-up:
我建议，不知道你想要什么，并假设以下标记：
<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);
}?
回答by blossoms
You can use some UI framework like bootstrap or Flat ui .
您可以使用一些 UI 框架，例如 bootstrap 或 Flat ui 。
<a href="#" class="btn btn-primary"> Click Me</a>
