在 <button> 中嵌入图像元素 [英] Embed image in a <button> element

问题描述

我正在尝试在 HTML 中的 元素上显示 png 图像.按钮与图像大小相同，图像显示但由于某种原因不在中心 - 因此不可能看到所有内容.换句话说，图像的右上角似乎位于按钮的中心，而不是按钮的右上角.

I'm trying to display a png image on a <button> element in HTML. The button is the same size as the image, and the image is shown but for some reason not in the center - so it's impossible to see it all. In other words it seems like the top right corner of the image is located at the center of the button and not at the top right corner of the button.

这是 HTML 代码:

This is the HTML code:

<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>

更新:
我认为，实际发生的是保证金问题.我得到了两个像素的边距，所以背景图像从按钮中消失了.按钮和图片大小一样，只有20px，所以很显眼...我试过margin:0,padding:0，但它没有帮助...

Update:
What actually happens, I think, is a margin problem. I get a two pixel margin, so the background image is going out of the button. The button and the image are the same size, which is only 20px, so it's very noticable... I tried margin:0, padding:0, but it didn't help...

推荐答案

您可以使用输入类型图像.

You could use input type image.

<input type="image" src="http://example.com/path/to/image.png" />

它作为一个按钮工作，可以附加事件处理程序.

It works as a button and can have the event handlers attached to it.

或者，您可以使用 css 为按钮设置背景图像的样式，并适当设置边框、边距等.

Alternatively, you can use css to style your button with a background image, and set the borders, margins and the like appropriately.

<button style="background: url(myimage.png)" ... />

这篇关于在 <button> 中嵌入图像元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！