Html 如何用PNG图像制作圆形按钮？

我正在建立一个有很多图片的网站。这个概念是一个星系，所以你可以想象我有许多圆形行星，我想让它们成为可点击的按钮

这些行星是PNG格式的，背景是透明的，我希望点击区域只能是非透明区域（圆形）。然而，我还没有找到一个可行的解决办法

我还试着在图像上方放置一个透明的圆圈，并放置

我的代码片段：

HTML

现在，图像可以在整个正方形内单击，包括透明区域，但并非所有区域都可以单击（图像中有一些不可单击的补丁）

这让我快发疯了。任何指针都会非常有用。
我不确定是否正确地解释了您的问题，但请查看z索引。如果有元素相互重叠，这将是无法单击它们的原因
 您有三种方法：

1-在下面的代码片段中，我在第一个月亮上的图像div中使用了一个css圆圈

2-或者，在第二个月亮上得到相同的结果，将圆放置在
div:after
上

3-第三种方法与第二种方法完全相反：创建一个透明的圆，让月亮图像在
：之后出现

第一种和第三种方法允许您使用moon作为
onclick
javascript鼠标事件的链接。红色元素设置为
指针事件：无所以它对卫星的悬停没有影响


正文{
边际：0px；
背景：黑色；
溢出：隐藏；
}
#圆圈1{
宽度：200px；
高度：200px；
背景：紫色；
-moz边界半径：100px；
-webkit边界半径：100px；
边界半径：100px；
光标：指针；
不透明度：0.2；
}
#图1{
显示：内联块；
宽度：200px；
高度：200px；
位置：相对位置；
背景：url（'http://i.imgur.com/YAWvTuu.png');
背景重复：无重复；
背景大小：100%100%；
}
#图2{
显示：内联块；
宽度：200px；
高度：200px；
位置：相对位置；
背景：url（'http://i.imgur.com/YAWvTuu.png');
背景重复：无重复；
背景大小：100%100%；
}
#图2：之后{
内容：“；
显示：内联块；
宽度：200px；
高度：200px；
背景：橙色；
-moz边界半径：100px；
-webkit边界半径：100px；
边界半径：100px；
光标：指针；
不透明度：0.2；
}
#不活跃{
背景：番茄；
位置：绝对位置；
顶部：50px；
左：50px；
高度：50px；
宽度：400px；
指针事件：无；
不透明度：0.9；
}
#第三{
位置：绝对位置；
显示：内联块；
宽度：200px；
高度：200px；
背景：透明；
-moz边界半径：100px；
-webkit边界半径：100px；
边界半径：100px；
光标：指针；
}
#第三：之后{
内容：url（'http://i.imgur.com/YAWvTuu.png');
光标：自动；
指针事件：无；
}
因此，您可以将行星或圆包裹在

标记：

<a href="#">
  <canvas></canvas>
</a>
<br><br>
<a href="#">
  <canvas></canvas>
</a>

你愿意学习SVG吗？@MikeRobinson erm问题是，所有的图形都已经由团队的另一名成员制作完成，几个月前就完成了，告诉他们用SVG重新制作一切不是很好：（（除非它实际上很简单，我误解了）.但这能有效地解决问题吗？你说你已经试着做了第二个不可见的圆圈，为什么不起作用？@JeffArries只有圆圈的一部分是可点击的，因为某些原因圆圈内有不可点击的区域。我怀疑这是由于重叠的图像，但cmiiw。我不知道你是否已经做了，但是@freestock.tk的答案应该对你有用！当我尝试制作一个透明的圆圈放在图像顶部时，我用z索引将其放在最顶部，但圆圈内仍有不可点击的区域。：（你可以使用
指针事件：无；
禁用（一段时间）目标前面的这些元素。非常感谢！！是的，这是有意义的。我还意识到，当我应用“指针事件：无”时，我没有把它放在其他一些我最初认为不会有任何效果的文本类中…后来证明它们会有效果！所以我尝试在图像工作的顶部画一个圆圈。但是你的方法在设计上更好！我会尝试，如果我遇到问题，我希望你不会介意给我更多的指针？和以前一样，but现在有了一些按类（而不是id）选择的选择器和带有百分比的css圆圈，这样你就可以用更少的代码拥有几个不同的行星。你有三个选择：1-在photoshop上准备行星图像（让它们都遵循相同的标准）或者2-更改背景大小/位置链接：link:或者3-更改css圆圈大小/位置。好的，忘记
，然后执行以下操作：
（它不能在JSFIDLE/codepen上测试，因为它会将您带到另一个地方，但我已经在这里测试了它及其工作原理）。
.AIcon{
position:absolute; left: 50%; top: 40%; width: 2.5%; height:5%; opacity: 1;
-webkit-animation: AAAIcon .5s linear 0s 1 normal forwards running;
}

@-webkit-keyframes AAAIcon {
0%  {left: 50%; top: 40%; width: 2.5%; height:5%; opacity: 0; z-index:4;}
100%  {left: 78%; top: 20%; width: 32%; height:32%; opacity: 1; z-index:4;} 
}

<a href="#">
  <canvas></canvas>
</a>
<br><br>
<a href="#">
  <canvas></canvas>
</a>

a {
  border-radius: 100%;
  overflow: hidden;
  display: inline-block;
}
canvas {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: #f00;
  border-radius: 100%;
}