html - 如何将具有透明背景的png图像的可见部分作为链接？

Question

我想使用具有透明背景的 .png 图像作为我网站上的链接。

我试过这个 html:

<a href="index.html">
    <img border="0" src="smiley.png" alt="smiley" width="150" height="150">
</a>

和这个CSS:

a
{
    text-decoration: none;
    color: inherit;
}

但是，在我的图像的透明背景上图像仍然可以点击。

这是我想要得到的说明:

***注:此图仅供引用。我 100% 确定我的图片具有透明背景。*

当光标仅位于笑脸(可见部分)时，如何将我的图像用作链接？

Answer 1

对于这个特定的图像，您可以使用 image map以圆圈作为事件区域。

<map id="ImgMap0" name="ImgMap0">
    <area alt="" coords="30, 32, 30" href="http://www.link.com" shape="circle" />
</map>
<img src="http://placehold.it/64x64" alt="" usemap="#ImgMap0"/>