HTML .png 图像作为按钮形状答案

【问题标题】：HTML .png Image As Button ShapeHTML .png 图像作为按钮形状
【发布时间】：2018-07-22 07:58:23
【问题描述】：

我怀疑这很容易实现，但它会非常有用！！！

如果您不知道 .png 图像具有透明度（透视）。有没有办法创建一个按钮，它只是 png 图像的形状，而不是整个 png-image-border。请参阅我的图像以获得更好的理解。这是 .png 图像，如果你想玩的话：https://i.imgur.com/y8XLjqO.png

【问题讨论】：

你可以把它转换成svg..
@Super User 你能解释更多或发布一个例子吗？
检查小提琴https://jsfiddle.net/cooy5sLy/
哇，这正是我想要的！最后一个问题，我如何将我的 png 转换为那个疯狂的 svg 字符串？
我已经在小提琴中添加了转换后的代码。你可以使用它

标签： html css image button

【解决方案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"/>

【讨论】：

这很好用，但问题是当您需要执行“悬停”或“点击后”类型的视觉更改等操作时。您将如何更改按钮（图像）？我认为加载新图像有点过分。

【解决方案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

【讨论】：

这很好用，但问题是当您需要执行“悬停”或“点击后”类型的视觉更改等操作时。您将如何更改按钮（图像）？我认为加载新图像有点过分。
嗯，这是你情况的唯一解决方案。