Osadź obraz w elemencie <button>

Próbuję wyświetlić obraz png na <button>elemencie w HTML. Przycisk ma taki sam rozmiar jak obrazek, a obraz jest pokazany, ale z jakiegoś powodu nie jest pośrodku - więc nie można go zobaczyć. Innymi słowy, wygląda na to, że prawy górny róg obrazu znajduje się na środku przycisku, a nie w prawym górnym rogu przycisku.

Oto kod HTML:

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

Aktualizacja:
Myślę, że to, co się właściwie dzieje, to problem z marginesem. Dostaję dwa piksele marginesu, więc obraz tła wychodzi z przycisku. Przycisk i obraz są tej samej wielkości, co jest tylko 20px, dlatego tak bardzo wyczuwalny ... Próbowałem margin:0, padding:0ale to nie pomogło ...

Możesz użyć obrazu typu wejścia.

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

Działa jako przycisk i może mieć dołączone programy obsługi zdarzeń.

Alternatywnie możesz użyć css, aby nadać styl przyciskowi obraz tła i odpowiednio ustawić obramowanie, marginesy i tym podobne.

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

Jeśli obraz jest fragmentem danych semantycznych (na przykład obrazem profilowym), użyj <img>elementu wewnątrz swojego <button>i użyj CSS, aby zmienić rozmiar <img>. Jeśli obraz jest tylko sposobem na uatrakcyjnienie przycisku, użyj CSS, background-imageaby stylizować <button>(i nie używaj <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;
}

Wynik:

Spróbuj tego

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

Najprostszy sposób na umieszczenie obrazu w przycisku:

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

Spowoduje to automatyczną zmianę rozmiaru przycisku do rozmiaru obrazu.

Dlaczego nie używasz obrazu z onclickatrybutem?

Na przykład:

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

Dodaj nowy folder z nazwą Obrazy w swoim projekcie. Umieść obrazy w folderze Obrazy. Wtedy będzie działać dobrze.

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

Spróbuj użyć tego formatu i użyj atrybutu „szerokość” do zarządzania rozmiarem obrazu, jest to proste. JavaScript można również zaimplementować w elemencie.

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

Przyciski nie obsługują bezpośrednio obrazów. Ponadto sposób, w jaki robisz, dotyczy linków ()

Obrazy są dodawane do przycisków za pomocą właściwości BACKGROUND-IMAGE w stylu

możesz również określić powtórzenia i inne właściwości za pomocą znacznika

Na przykład: podstawowy obraz dodany do przycisku miałby następujący kod:

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

Pokój