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

标签 html css

我想使用具有透明背景的 .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;
}

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

这是我想要得到的说明:

sample

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

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

最佳答案

对于这个特定的图像,您可以使用 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"/>

关于html - 如何将具有透明背景的png图像的可见部分作为链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15579490/

相关文章:

javascript - 从多个字符串中仅保留一个字符串 - 数组

javascript - dForm 插件添加时间选择器小部件

javascript - 如何在 Bootstrap slider 中设置指示器的样式?

css - 如何覆盖 local.xml 中的 Bootstrap 声明

javascript - 将 JSON CSS 应用于 React 组件?

Html5 上下文 ('2d' ) 使用填充背景时,drawImage 设置右上角的图像矩形

jquery - 使用 html() 方法显示图像?

jquery - 使用 jQuery 以百分比形式设置 outerWidth

css - SVG 的填充属性在 Chrome 中不起作用

jquery - 使用 jqprint 打印 Canvas 元素