我试图在单击图像时获取指向正常工作的页面的链接。关于这个jsFiddle你会看到三个圆形图像。当鼠标悬停在其中任何一个上时，会呈现背景阴影图像。当您单击“律师事务所”图像时，应会显示一个包含一些文本的简短 HTML 页面。发生的情况是指向律师事务所文本的链接不是呈现为图像本身，而是呈现为“>”字符 - 请参见下面的屏幕截图。
谁能指导我如何使图像充当链接，好吗？还要确保当鼠标悬停在律师事务所图像上时，背景图像继续以律师事务所图像为中心。
CSS:
.center {text-align: center;}
#sfimages {padding:15px;}
#sfimages:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;
}
HTML:
<body>
<table style="width: 100%">
<tr>
<td class="center">
<div id="sfimages">
<a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"> >
<object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object>
</a>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object>
</div>
</td>
</tr>
</table>
最佳答案
抱歉耽搁了一段时间，今天对我来说很忙，我有足够的时间回过头来回答你的问题。这是我的推荐。看起来您正在使用的代码是从 inkscape 生成的？当它运行源代码时，特别是在对象区域中。但是，如果您想要链接，请不要害怕。只需进行以下轻微调整，您就可以使用链接了!
CSS:
.center {
text-align: center;
}
#sfimages {
padding:15px;
position:relative;
width:380px;
height:273px;
}
#sfimages:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;
}
#ext-site {
display:block;
width:380px;
height:273px;
position:absolute;
z-index:9999;
}
HTML:
<table style="width: 100%">
<tr>
<td class="center">
<div id="sfimages">
<a id="ext-site" href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"></a>
<object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object>
</div>
</td>
</tr>
</table>
这是一个经典的技巧，涉及一个相对显示 block 元素内部的 asbolute 定位 anchor 链接。只要 anchor 拉伸(stretch)到其父级的大小，它就充当整个部分顶部的不可见按钮。
查看我的新 Fiddle
关于html - 图片(带有背景图片)作为链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15482357/