Html 如何给html按钮标签一个图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8818543/
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
How to give html button tag an image
提问by Matt Murphy
I am wondering if there is a way to give the HTML button tag, <button>an image so the image is click-able on my webpage. That way when users click on the image I can have other things happen
我想知道是否有办法给 HTML 按钮标签，<button>一个图像，以便图像可以在我的网页上点击。这样当用户点击图像时，我可以发生其他事情
This doesn't seem to be working, and was wondering if it is even possible
这似乎不起作用，并且想知道它是否甚至可能
HTML code -
HTML 代码 -
<button>
<img src="images/dagger.png" width="10%" height="10%" id="dagger" />
</button>
回答by Maurice
回答by Simone
You could set the image as button background
您可以将图像设置为按钮背景
button {
background-image:url('images/dagger.png');
}
回答by Fata1Err0r
I was having similar issues, and thought I would drop this post for anyone in the future that sees this thread.
我遇到了类似的问题，并认为我会为将来看到此线程的任何人删除此帖子。
From my understanding, you're not wanting a BUTTON, but a clickable image that acts as a button. Here is what I did:
根据我的理解，您不需要按钮，而是用作按钮的可点击图像。这是我所做的：
HTML:
HTML：
<img src="images/dagger.png" width="10%" height="10%" id="dagger" />
JavaScript/jQuery:
JavaScript/jQuery：
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dagger").click(function(){
// what you wanted your button to do when user clicks it
});
</script>
By doing it this way, you get rid of the normal "button" image, and you can use whatever image you want as your clickable button. As well, you get the same functionality that you're wanting from the button, and it opens up many other paths to achieving your purposes.
通过这样做，您可以摆脱普通的“按钮”图像，您可以使用任何您想要的图像作为可点击按钮。同样，您可以从按钮获得与您想要的相同的功能，并且它开辟了许多其他途径来实现您的目的。
Hope it helps!
希望能帮助到你！
Another method I use is simply putting the onclickevent on the imgitself to call a function.
我使用的另一种方法是简单地将onclick事件放在img自身上以调用函数。
html:
html：
<img src="images/dagger.png" width="10%" height="10%" id="dagger" onclick="myFunction()" />
JS:
JS：
<script>
myFunction() {
// what I want to happen if user clicks image
}
</script>
Depending upon what you're doing, and what you're trying to manipulate, all of the examples on this page will provide you with better/worse ways of doing it. Using the onclickevent within the imgtag, you can pass variables/information to the function to utilize, and then have the function relay it to your PHP/ASP/etc.. As well, if you were dealing with a form, you can have your function handle information/submission, rather than the default submission that forms use. Use your imagination with the problems you come across, and decide which method works out better. Never settle for learning just one way of doing something.
根据您在做什么，以及您要操作什么，本页上的所有示例都将为您提供更好/更坏的方法。使用标签onclick内的事件img，您可以将变量/信息传递给要使用的函数，然后让函数将其传递给您的 PHP/ASP/等。同样，如果您正在处理表单，您可以让您的函数处理信息/提交，而不是表单使用的默认提交。用你的想象力来解决你遇到的问题，然后决定哪种方法更有效。永远不要满足于只学习一种做事方式。
回答by Declan Cook
Normally you wouldn't use a button you can just bind the click event to the image with JavaScript.
通常您不会使用按钮，您可以使用 JavaScript 将单击事件绑定到图像。
But if you must have a button you can style the button using CSS and the background-image property.
但是如果你必须有一个按钮，你可以使用 CSS 和 background-image 属性来设置按钮的样式。
