带有图像和文本的 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 超链接的主要内容,如果未能解决你的问题,请参考以下文章

Html和CSS如何使具有悬停效果的图像成为超链接

如何使用 iText 将带有图像和超链接的 HTML 转换为 PDF?

带有 html 超链接的 UITextView 或 UILabel

零基础入门前端系列—超链接和文本格式化标签

java 解析html 提取超链接,然后将超链接存储到文本中

如何用 dojo 增强网格中的文本替换超链接?