Incorpora immagine in un elemento <button>

Question

Sto cercando di visualizzare un'immagine png su un elemento <button> in HTML. Il pulsante ha le stesse dimensioni dell'immagine, e l'immagine viene mostrata, ma per qualche motivo non al centro - quindi è impossibile vederlo tutto. In altre parole, sembra che l'angolo in alto a destra dell'immagine si trovi al centro del pulsante e non nell'angolo in alto a destra del pulsante.

Questo è il codice HTML:

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

Aggiornamento:
Quello che accade, credo, è un problema di margine. Ottengo un margine di due pixel, quindi l'immagine di sfondo sta uscendo dal pulsante. Il pulsante e l'immagine sono le stesse dimensioni, che è solo 20px, quindi è molto inferme ... Ho provato margin:0, padding:0, ma non ha aiutato ...

Answer 1

immagine tipo di ingresso è possibile utilizzare.

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

Funziona come un pulsante e può essere collegato ai gestori di eventi.

In alternativa, è possibile utilizzare css per ridimensionare il pulsante con un'immagine di sfondo e impostare i bordi, i margini e simili in modo appropriato.

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

Answer 2

provare questo

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

Answer 3

pulsanti non supportano direttamente le immagini. Inoltre il modo in cui si sta facendo è per i collegamenti()

immagini vengono aggiunte sui pulsanti che utilizzano la proprietà background-image in stile

è anche possibile specificare le ripetizioni e altre proprietà utilizzando tag

Per esempio : un'immagine di base aggiunto a un pulsante avrebbe questo codice:

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

Pace

Answer 4

Se l'immagine è un pezzo di dati semantici (come un'immagine del profilo, ad esempio), quindi utilizzare un elemento <img> all'interno di <button> e utilizzare il CSS per ridimensionare lo <img>. Se l'immagine è solo un modo per rendere visivamente piacevole un pulsante, utilizzare CSS background-image per applicare lo stile <button> (e non utilizzare uno <img>).

Demo: 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; 
} 

uscita:

Answer 5

Aggiungi una nuova cartella con il nome di Immagini nel tuo progetto. Metti alcune immagini nella cartella Immagini. Quindi funzionerà bene.

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

Answer 6

provare questo codice:

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

ha funzionato bene per me.