Insertar imagen en un elemento <button>

Question

Estoy tratando de mostrar una imagen png en un elemento <button> en HTML. El botón tiene el mismo tamaño que la imagen, y la imagen se muestra pero por algún motivo no está en el centro, por lo que es imposible verlo todo. En otras palabras, parece que la esquina superior derecha de la imagen se encuentra en el centro del botón y no en la esquina superior derecha del botón.

Este es el código HTML:

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

Actualización:
Lo que realmente ocurre, creo, es un problema de margen. Obtengo un margen de dos píxeles, por lo que la imagen de fondo está saliendo del botón. El botón y la imagen son del mismo tamaño, que sólo es 20px, por lo que es muy notable ... Probé margin:0, padding:0, pero no sirvió de nada ...

Answer 1

imagen del tipo de entrada que podría utilizar.

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

Funciona como un botón y puede tener los controladores de eventos que se le atribuye.

Como alternativa, puede usar css para darle un estilo a su botón con una imagen de fondo, y establecer los bordes, márgenes y similares apropiadamente.

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

Answer 2

probar este

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

Answer 3

botones no apoyan directamente las imágenes. Por otra parte la forma en que está haciendo es para los enlaces()

imágenes se añaden sobre los botones utilizando la propiedad Imagen de fondo en estilo

también puede especificar las repeticiones y otras propiedades usando la etiqueta

Por ejemplo : una imagen básica añadido a un botón tendría este código:

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

Paz

Answer 4

Si la imagen es un pedazo de datos semánticos (como una imagen de perfil, por ejemplo), luego use un elemento <img> dentro de su <button> y use CSS para cambiar el tamaño del <img>. Si la imagen es solo una forma de hacer que un botón sea agradable a la vista, use CSS background-image para marcar el <button> (y no use un <img>).

Demostración: 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; 
} 

Salida:

Answer 5

Agregue una nueva carpeta con el nombre de Imágenes en su proyecto. Pon algunas imágenes en la carpeta Imágenes. Entonces funcionará bien.

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

Answer 6

probar este código:

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

funcionó bien para mí.