图像（带背景图像）作为链接 [英] Image (with a background image) as link
问题描述
我试图获得点击图片时正确工作的页面的链接。在此 jsFiddle 上，您会看到三张圆形图像。当鼠标悬停在任何一个上面时，会渲染背景阴影图像。当您点击律师事务所图片时，应显示一个带有文字的简短HTML页面。发生的事情是，与律师事务所文本的链接不是以图像本身的形式呈现，而是以>字样呈现 - 请参阅下面的截图。
任何人都可以指导我如何让图片充当链接，请问？还要确保背景图像继续以鼠标悬停在法律公司形象上为中心。
$ b .center {text-align：center;}
#sfimages {padding：15px;}
#sfimages ：hover {
background-image：url（http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r）;
背景重复：不重复;
background-position：center;
}
HTML：
<身体GT;
< 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/12qOaTGCZYzQtqFJpaGbPValt =/>
< / 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/54AaqhQUU8npACF2vXzKFpalt =/>
< / object>
< / div>
< / td>
< td class =center>
< div id =sfimages>
< object type =image / svg + xml
data =http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx>
< img src =http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6alt =/>
< / object>
< / div>
< / td>
< / tr>
< / table>
是空余的字符：
请检查下面的代码（在评论中有一个链接到完整的代码）：
< 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/12qOaTGCZYzQtqFJpaGbPValt =/>
< / 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/54AaqhQUU8npACF2vXzKFpalt =/>
< / object>
< / div>
< / td>
< td class =center>
< div id =sfimages>
< object type =image / svg + xml
data =http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx>
< img src =http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6alt =/>
< / object>
< / div>
< / td>
< / tr>
< / table>
I'm trying to get a link to a page working correctly when an image is clicked. On this jsFiddle you'll see three circular images. When the mouse is hovered over any of them, a background shadow image is rendered. When you click on the 'law firms' image, a short HTML page with some text should be displayed. What happens is that the link to the law firm text is rendered not as the image itself, but as a '>' character - see screenshot below.
Can anyone guide me how to make the image act as the link, please? Also ensuring that the background image continues to be centred over the law firms image when the mouse is hovered over it.
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>
There was spare character: please check following code (in a comment there is a link to the full code):
<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>
这篇关于图像（带背景图像）作为链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
