HTML .png图像作为按钮形状

Question

我怀疑这很难实现，但这将非常有用！

如果您不知道.png图像具有透明度（可以透过），那么是否有一种方法可以创建仅为png图像形状而不是整个边框的按钮。请参阅我的图片以更好地理解。如果您想玩玩这个.png图像，请单击以下链接：https://i.imgur.com/y8XLjqO.png

- Frank

---

你可以将其转换为SVG。 - Super User

@超级用户，您能否再解释一下或者提供一个例子？ - Frank

我已经在Fiddle中添加了转换后的代码。你可以使用它。 - Super User

我的意思是，我如何使用其他图片自己完成这个操作，这张图片只是一个例子。 - Frank

你可以使用Adobe Illustrator的图像追踪工具来完成这个任务。 - Super User

Answer 1

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

Here you can generate image map http://image-map.weebly.com/ similar like you can find many image map generator online.

<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"/>

- Saravana

---

这个很好用，但它的问题在于当你需要像“悬停”或“点击后”这样的视觉变化时该怎么办。你会如何在悬停时改变按钮（图像）？我认为加载一个新图像有点过头了。 - Frank

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

- Kiran Dash

---

这个功能很好，但它的问题在于当你需要做像“悬停”或“点击后”类型的视觉变化时。你如何在悬停时改变按钮（图像）？我认为加载一个新图像有点过分了。 - Frank

这是您的情况下唯一的解决方案。 - Kiran Dash