PNG图像作为按钮答案

【问题标题】：PNG Image as ButtonPNG图像作为按钮
【发布时间】：2021-06-01 10:17:04
【问题描述】：

我正在尝试将我的资产中的图像设置为按钮，并且在大多数情况下，让它工作。图片是 PNG。

这是我的按钮 HTML 代码：

<button type = "button" onclick = "start()"> <img src = "assets/site/start-button.png"> </button>

这是 PNG 图像：

这是我看到的：

如何使按钮的白色部分消失？我认为（不完全确定是否是这种情况——如果不是，有人可以解释发生了什么吗？）按钮正在包围图像，就像它处理文本一样，而不是简单地将图像作为按钮。我该如何改变？我希望它只显示 PNG 图像，没有别的。

编辑：我没有任何 CSS 按钮。我需要添加什么吗？

【问题讨论】：

【解决方案1】：

您需要从按钮中删除所有样式，例如其背景颜色、边框等。

您可以通过添加CSS属性apperance: none;来移除浏览器的默认样式

如果要包装图像，我建议使用锚标记，而不是按钮。

【讨论】：

【解决方案2】：

我建议从按钮中删除图像，并将其设置为 css 中的背景图像，同时删除默认按钮样式。工作示例：

function start() {
  console.log('start');
}

.button {
  background: url('https://mdn.mozillademos.org/files/7693/catfront.png') no-repeat;
  cursor:pointer;
  border: none;
}

&lt;input type="button" name="button" onclick="start()" class="button" /&gt;

【讨论】：