Incorporar imagem em um elemento <button>

Estou tentando exibir uma imagem png em um <button>elemento em HTML. O botão tem o mesmo tamanho da imagem e a imagem é mostrada, mas por algum motivo não está no centro - por isso é impossível ver tudo. Em outras palavras, parece que o canto superior direito da imagem está localizado no centro do botão e não no canto superior direito do botão.

Este é o código HTML:

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

Atualização:
O que realmente acontece, eu acho, é um problema de margem. Eu tenho uma margem de dois pixels, então a imagem de fundo está saindo do botão. O botão ea imagem são do mesmo tamanho, que é apenas 20px, por isso é muito explícito ... Eu tentei margin:0, padding:0mas isso não ajuda ...

Você pode usar a imagem do tipo de entrada.

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

Funciona como um botão e pode ter os manipuladores de eventos anexados a ele.

Como alternativa, você pode usar css para estilizar seu botão com uma imagem de fundo e definir as bordas, margens e afins de maneira apropriada.

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

Se a imagem for uma parte de dados semânticos (como uma imagem de perfil, por exemplo), use um <img>elemento dentro de seu <button>e use CSS para redimensionar o arquivo <img>. Se a imagem é apenas uma maneira de tornar um botão visualmente agradável, use CSS background-imagepara estilizar o <button>(e não use um<img> ).

Demonstração: 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;
}

Resultado:

tente isso

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

A maneira mais simples de colocar uma imagem em um botão:

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

Isso redimensionará automaticamente o botão para o tamanho da imagem.

Por que você não usa uma imagem com um onclick atributo?

Por exemplo:

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

Adicione uma nova pasta com o nome de Imagens no seu projeto. Coloque algumas imagens na pasta Imagens. Então vai funcionar bem.

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

Experimente este formato e use o atributo "width" para gerenciar o tamanho da imagem, é simples. JavaScript também pode ser implementado em elemento.

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

Os botões não suportam imagens diretamente. Além disso, você faz links ()

As imagens são adicionadas sobre os botões usando a propriedade BACKGROUND-IMAGE com estilo

você também pode especificar as repetições e outras propriedades usando a tag

Por exemplo: uma imagem básica adicionada a um botão teria este código:

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

Paz