Вставити зображення в елемент <кнопка>

Я намагаюся відобразити 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()'>

Додайте нову папку з назвою Зображення у проект. Помістіть кілька зображень у папку Зображення. Тоді це буде добре працювати.

<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)">

Мир