Question

我已成功将图像替换为按钮。但似乎图像放在按钮的顶部。我不想把它放在我的CSS中，因为有其他样式重叠它，我不想有任何重定向页面。

<button type="reset"><img src="images/cancel.png" width="15"></button>

Answer 1

在CSS中执行此操作！

button {
  background-image: url(images/cancel.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* put the height and width of your image here */
  height: 50px;
  width: 200px;
  border: none;
}

button span {
  display: none;
}

然后你的按钮是：

<button type="reset" title="In some browsers, this appears as a tooltip"> 
    <span>Cancel</span></button>

您也可以添加说明符来覆盖默认按钮行为 - 例如-webkit-appearance: none;，但我相信这足以满足您的需求。

Answer 2

为什么需要按钮？

您可以尝试删除按钮标记并尝试其中任何一种：

<img src="images/cancel.png" width="15" onClick="document.form1.reset();">

或

<a href="#" onClick="document.form1.reset();"><img src="images/cancel.png" width="15"></a>

只需将“form1”替换为您的表单名称。

Answer 3

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        function change(thi) {
            debugger;
            thi.setAttribute("src", "guitar.jpg");
            thi.innerHTML = "";
            thi.outerHTML = thi.outerHTML.replace(/button/g, "img");
        }
    </script>
</head>
<body>
    <button onclick="change(this)">OUR BUTTON</button>
</body>
</html>

Answer 4

<button type="reset" width="15" style="background-image: url('images/cancel.png');"/>

用图像替换按钮

4 个答案: