HTML .png图像作为按钮形状

Question

我怀疑这很容易，但它会非常有用!!!

如果你不知道.png图片中有透明度（见下）。有没有办法创建一个只有png图像形状的按钮，而不是整个png-image边框。请参阅我的图片以获得更好的理解。如果你想玩它，可以使用.png图像：https://i.imgur.com/y8XLjqO.png

Answer 1

您可以使用usemap选项并根据您的要求调整 coords =“140,150,140”。

在这里，您可以生成类似于您可以在线找到许多图像地图生成器的图像地图http://image-map.weebly.com/。

<map id="ImgMap0" name="ImgMap0">
    <area alt="" coords="140, 150, 140" href="http://www.link.com" shape="circle" />
</map>
<img src="http://via.placeholder.com/300" alt="" usemap="#ImgMap0"/>

Answer 2

您可以使用<area>标记。

<img src="https://html.com/wp-content/uploads/flamingo.jpg" alt="" usemap="#flamingo-map-with-default">
<map name="flamingo-map-with-default" id="flamingo-map-with-default">
<area alt="Flamingo." title="Flamingo." href="https://html.com/wp-content/uploads/just-flamingo.jpg" target="_blank" shape="poly" coords="103,421,633,423,601,389,575,356,532,334,511,322,475,305,447,288,443,263,436,215,424,180,427,144,430,117,427,94,421,66,407,46,386,34,363,22,352,22,343,20,329,20,308,24,291,33,272,53,254,79,240,113,229,154,226,190,226,265,225,288,199,304,177,323,165,334,143,361">
<area alt="Not the Flamingo." title="Not the Flamingo." href="https://html.com/wp-content/uploads/no-flamingo.jpg" target="_blank" shape="default"> </map>

阅读更多：

https://html.com/attributes/area-shape/

https://www.w3schools.com/tags/tag_area.asp