Html 用图像替换按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11380776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replacing button with image
提问by JLearner
I have successfully replaced the button with the image. But it appears that the image is placed on top of the button. I don't wish to put inside my CSS as there are other styles overlapping it and I don't want to have any redirect pages.
我已经成功地用图像替换了按钮。但似乎图像被放置在按钮的顶部。我不想放入我的 CSS 中，因为还有其他样式与它重叠，而且我不想有任何重定向页面。
<button type="reset"><img src="images/cancel.png" width="15"></button>
回答by artlung
Do this in CSS!
在 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;
}
Then your button is:
那么你的按钮是：
<button type="reset" title="In some browsers, this appears as a tooltip">
<span>Cancel</span></button>
You may also add specifiers to override default button behaviors - for example -webkit-appearance: none;but I believe that's enough to do what you need.
您还可以添加说明符来覆盖默认按钮行为 - 例如，-webkit-appearance: none;但我相信这足以满足您的需求。
回答by Riddhi Doshi
<!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>
回答by bigmoof
Why do you need the button?
为什么需要按钮？
You can try and remove the button tag and try either of these :
您可以尝试删除按钮标签并尝试以下任一方法：
<img src="images/cancel.png" width="15" onClick="document.form1.reset();">
or
或者
<a href="#" onClick="document.form1.reset();"><img src="images/cancel.png" width="15"></a>
Just replace "form1" with your form name.
只需将“form1”替换为您的表单名称。
回答by osyan
<button type="reset" width="15" style="background-image: url('images/cancel.png');"/>
