html - 圆形图片中的链接

Question

在我的网页中，我有一张图片，以及这张图片中的链接。

<a href='..'><img src='...' class='img-circle'></a>

（img-circle 是 Twitter Bootstrap 库的一部分）

我希望链接仅在图像上，例如在圆圈上，而不是在正方形上。请问您知道解决方案吗？

score 1 · Accepted Answer

您将需要在图像上创建一个锚链接，如下所示：

#a {
    position:absolute;
    border-radius:100px;
    background-color:#72CEE0;
    width:100px;
    height:100px;
    left:150px;}

和 HTML：

<div id="a" onclick="window.location='http://whatever.com';"><img src="image.jpg"></div>

您必须修改上面的left、和属性width，以匹配圆形图像的大小、形状和位置。border-radiusheight

这是 Stack Overflow 上另一个答案的示例：

编辑：似乎 Chrome 的 onclick 可能有问题，虽然我不确定这个问题的真正原因是什么，而只是简单地放置一个这样a href的：div

1 回答 1