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

Question

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

Это HTML-код:

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

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

Answer 1

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

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

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

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

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

Answer 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;
}

Вывод:

Answer 3

попробуйте

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

Answer 4

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

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

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

Answer 5

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

Например:

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

Answer 6

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

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

Answer 7

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

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

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

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

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

Мир