带有图像和文本的 HTML 超链接
Posted
技术标签:
【中文标题】带有图像和文本的 HTML 超链接【英文标题】:HTML Hyperlink with Image AND Text 【发布时间】:2012-07-06 01:22:09 【问题描述】:是否可以让超链接看起来像按钮上带有文字?
我们可以用代码制作超链接按钮:
<a href="..."> <img src="button.png" ></img> </a>
但我还需要按钮中心的文本。
谢谢。
【问题讨论】:
【参考方案1】:可以将按钮设置为背景:
<a href="..." style="text-align:center; background: url('button.png'); width: 100px; height: 50px;">Your text</a>
但我会尽量避免使用带有背景图像的按钮(除非它们是奇怪的形状)。相反,我会尝试使用 CSS3。
【讨论】:
【参考方案2】:我建议,在不知道你想要什么的情况下,假设以下标记:
<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 demo.
【讨论】:
【参考方案3】:您可以使用一些 UI 框架,例如 bootstrap 或 Flat ui 。
<a href="#" class="btn btn-primary"> Click Me</a>
【讨论】:
以上是关于带有图像和文本的 HTML 超链接的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 iText 将带有图像和超链接的 HTML 转换为 PDF?
带有 html 超链接的 UITextView 或 UILabel