如何将透明背景的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"/>

Answer 2

使用css-attribute border-radius: 50%;曲线边（如果图像是圆形的）

Answer 3

尝试这样，映射技术

<map name="imgmap">
<area shape="smiley" coords="x,y,radius" href="link.html" alt="img_alt">
</map>

Answer 4

你也可以使用css3。我发现这篇文章有details and a good example

我没有'难以'测试这个，但你可以尝试一下。

CSS

.circle {
    background: none repeat scroll 0 0 #CCCCCC;
    /* some cross-browser css missing for border-radius */
    border-radius: 100px 100px 100px 100px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 20px;
    height: 200px;
    line-height: 200px;
    margin-right: 30px;
    text-align: center;
    width: 200px;
}
.circle-border {
    background: none repeat scroll 0 0 #CCCCCC;
    border: 1px solid #999999;
    /* some cross-browser css missing for border-radius */
    border-radius: 100px 100px 100px 100px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 20px;
    height: 199px;
    line-height: 200px;
    margin-right: 30px;
    text-align: center;
    width: 199px;
}

HTML

<a href="#" class="circle">BUTTON</a>
<hr style="clear:both;float:left;height:1px;width:100%;" />
<a href="#" class="circle-border">BUTTON</a>

Re-fiddled here

Answer 5

您不必使用图像映射。我尝试了2次<div>，并成功了。只需将笑脸和带有属性<div>的{​​{1}}放在主onclick="window.open('yoururl')"中。使两个<div>都变成圆形且不可见。

HTML：

<div>

CSS：

<div id="maindiv">
<img src="smiley.png" alt="" id="smiley"/>
<div id="LinkArea" onclick="window.open('https://google.com')"></div>
</div>