Вставить изображение в элемент <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, но это не помогло...

Ответы

Ответ 1

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

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

Он работает как кнопка и может привязывать к нему обработчики событий.

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

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

Ответ 2

Если изображение представляет собой фрагмент семантических данных (например, изображение профиля), используйте элемент <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;
}

Вывод:

enter image description here

Ответ 3

попробуйте это

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

Ответ 4

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

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

Ответ 5

Попробуйте этот код:

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

Это сработало для меня.

Ответ 6

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

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

вы также можете указать повторы и другие свойства с помощью тега

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

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

Мир