Sematkan gambar dalam elemen <button>

Saya mencoba untuk menampilkan gambar png pada <button>elemen dalam HTML. Tombolnya berukuran sama dengan gambar, dan gambar ditampilkan tetapi untuk beberapa alasan tidak di tengah - jadi tidak mungkin untuk melihat semuanya. Dengan kata lain sepertinya sudut kanan atas gambar terletak di tengah-tengah tombol dan bukan di sudut kanan atas tombol.

Ini adalah kode HTML:

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

Pembaruan:
Apa yang sebenarnya terjadi, saya pikir, adalah masalah margin. Saya mendapatkan margin dua piksel, sehingga gambar latar belakang keluar dari tombol. Tombol dan gambar adalah ukuran yang sama, yang hanya 20px, sehingga sangat terlihat ... Aku mencoba margin:0, padding:0tapi itu tidak membantu ...

Anda dapat menggunakan gambar tipe input.

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

Ini berfungsi sebagai tombol dan dapat memiliki penangan acara yang melekat padanya.

Sebagai alternatif, Anda dapat menggunakan css untuk menata tombol Anda dengan gambar latar belakang, dan mengatur batas, margin, dan sejenisnya dengan tepat.

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

Jika gambar adalah sepotong data semantik (seperti gambar profil, misalnya), maka gunakan <img>elemen di dalam Anda <button>dan gunakan CSS untuk mengubah ukuran <img>. Jika gambar hanyalah cara untuk membuat tombol menyenangkan secara visual, gunakan CSS background-imageuntuk menata <button>(dan jangan gunakan <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;
}

Keluaran:

coba ini

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

Cara termudah untuk menempatkan gambar ke dalam tombol:

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

Ini akan secara otomatis mengubah ukuran tombol menjadi ukuran gambar.

Mengapa Anda tidak menggunakan gambar dengan onclick atribut?

Sebagai contoh:

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

Tambahkan folder baru dengan nama Gambar di proyek Anda. Masukkan beberapa gambar ke folder Gambar. Maka itu akan bekerja dengan baik.

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

Coba seperti format ini dan gunakan atribut "lebar" untuk mengelola ukuran gambar, itu sederhana. JavaScript juga dapat diimplementasikan dalam elemen.

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

Tombol tidak secara langsung mendukung gambar. Selain itu cara yang Anda lakukan adalah untuk tautan ()

Gambar ditambahkan di atas tombol menggunakan properti BACKGROUND-IMAGE dengan penuh gaya

Anda juga dapat menentukan pengulangan dan properti lainnya menggunakan tag

Misalnya: gambar dasar yang ditambahkan ke tombol akan memiliki kode ini:

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

Perdamaian