如何使透明背景作为链接的png图像的可见部分？

我想使用带有透明背景的.png图像作为我网站上的链接。如何使透明背景作为链接的png图像的可见部分？

我试着用这个网站：

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

这个CSS：

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

然而，图像仍然对我的形象的透明背景点击。

这里是什么，我想获得插图：

sample

***注：该图片仅用于说明。我是100％确定我的照片有透明背景。*

只要光标位于笑脸上（可见部分），我该如何将图像用作链接？

来源

2013-03-22 Thanakron Tandavas

是像一个笑脸？ – aNewStart847 2013-03-22 21:00:10

对于此特定图像，您可以使用带圆圈的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"/>

来源

2013-03-22 20:43:45

谢谢，但有没有其他解决方案？我花了相当长的时间为50张图像创建图像映射。 – 2013-03-22 20:46:11

这个答案是我能想到的唯一的东西，除非你想用服务器端处理带有某种边缘检测的图像来自动生成你的图像映射，但是用手来做它可能会快得多。 – lucuma 2013-03-22 20:46:56

尝试这样，映射技术

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

来源

2013-03-22 20:49:32

使用的CSS属性border-radius: 50%;曲线两侧（如果图像是圆形）

来源

2013-03-22 21:03:28 aNewStart847

你也可以使用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

来源

2013-03-25 13:11:34

如何使透明背景作为链接的png图像的可见部分？

回答

相关问题