Вставить изображение в элемент <button>

Я пытаюсь отобразить изображение PNG для <button>элемента в HTML. Кнопка имеет тот же размер, что и изображение, и изображение показывается, но по какой-то причине не в центре - поэтому невозможно увидеть все это. Другими словами, кажется, что верхний правый угол изображения расположен в центре кнопки, а не в верхнем правом углу кнопки.

Это HTML-код:

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

Обновление:
что на самом деле происходит, я думаю, является проблемой маржи. Я получаю двухпиксельное поле, поэтому фоновое изображение выходит из кнопки. Кнопка и изображение того же размера, что только 20px, так что это очень заметно ... Я пытался margin:0, padding:0, но это не поможет ...

Вы можете использовать тип ввода изображения.

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

Он работает как кнопка и к нему могут быть прикреплены обработчики событий.

Кроме того, вы можете использовать css, чтобы стилизовать вашу кнопку с фоновым изображением и соответственно установить границы, поля и т.п.

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

Если изображение является частью семантических данных (например, изображение профиля), используйте <img>элемент внутри <button>и используйте CSS для изменения размера <img>. Если изображение - просто способ сделать кнопку визуально приятной, используйте CSS background-imageдля стилизации <button>(и не используйте <img>).

Демо: http://jsfiddle.net/ThinkingStiff/V5Xqr/

HTML:

<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>

CSS:

button {
    display: inline-block;
    height: 134px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 104px;
}

#close-image img {
    display: block;
    height: 130px;  
    width: 100px;
}

#close-CSS {
    background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
    background-size: 100px 130px;
    height: 134px;  
    width: 104px;
}

Вывод:

попробуй это

   <input type="button" style="background-image:url('your_url')"/>

Самый простой способ поместить изображение в кнопку:

<button onclick="myFunction()"><img src="your image name here.png"></button>

Это автоматически изменит размер кнопки до размера изображения.

Почему вы не используете изображение с onclickатрибутом?

Например:

<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>

Добавьте новую папку с именем Images в ваш проект. Поместите несколько изображений в папку изображений. Тогда все будет работать нормально.

<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">

Попробуйте использовать этот формат и использовать атрибут width для управления размером изображения, это просто. JavaScript также может быть реализован в элементе.

<button><img src=""></button>

Кнопки не поддерживают изображения напрямую. Кроме того, вы делаете для ссылок ()

Изображения добавляются поверх кнопок с использованием свойства BACKGROUND-IMAGE в стиле

Вы также можете указать повторы и другие свойства, используя тег

Например: базовое изображение, добавленное к кнопке, будет иметь следующий код:

    <button style="background-image:url(myImage.png)">

мир