Görüntüyü <düğmesi> öğesine gömme

<button>HTML'deki bir öğe üzerinde bir png resmi göstermeye çalışıyorum . Düğme görüntü ile aynı boyuttadır ve görüntü gösterilir, ancak bir nedenden dolayı merkezde değil - bu yüzden hepsini görmek imkansızdır. Başka bir deyişle, görüntünün sağ üst köşesi düğmenin sağ üst köşesinde değil, düğmenin ortasında bulunur gibi görünüyor.

Bu HTML kodudur:

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

Güncelleme:
Aslında olan şey, bir marj problemidir. İki piksel kenar boşluğu alıyorum, bu yüzden arka plan görüntüsü düğmeden çıkıyor. Düğme ve görüntü sadece aynı büyüklüktedir 20pxçok farkedilir yüzden, ... Denedim margin:0, padding:0ama yardım etmedi ...

Giriş tipi görüntüyü kullanabilirsiniz.

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

Bir düğme olarak çalışır ve olay işleyicilerine eklenebilir.

Alternatif olarak, düğmenizi bir arka plan resmiyle şekillendirmek ve kenarlıkları, kenar boşluklarını ve benzerlerini uygun şekilde ayarlamak için css kullanabilirsiniz.

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

Görüntü bir semantik veri parçasıysa (örneğin bir profil resmi gibi), <img>içinizdeki bir öğeyi <button>kullanın ve boyutunu değiştirmek için CSS'yi kullanın <img>. Görüntü, bir düğmeyi görsel olarak memnun etmenin bir yoluysa, CSS'yi background-imagekullanarak stil <button>(ve bir kullanmayın <img>) kullanın .

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

Çıktı:

bunu dene

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

Bir resmi bir düğmeye yerleştirmenin en basit yolu:

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

Bu, düğmeyi otomatik olarak görüntünün boyutuna göre yeniden boyutlandırır.

Neden onclicközniteliği olan bir resim kullanmıyorsunuz ?

Örneğin:

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

Projenize Görüntüler adıyla yeni bir klasör ekleyin. Bazı resimleri Görüntüler klasörüne koyun. Sonra iyi çalışır.

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

Bu formatı deneyin ve görüntü boyutunu yönetmek için "genişlik" özelliğini kullanın, basittir. JavaScript öğeye de uygulanabilir.

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

Düğmeler görüntüleri doğrudan desteklemez. Üstelik yaptığınız yol bağlantılar () için

Görüntüler, BACKGROUND-IMAGE özelliği stil kullanılarak düğmeler üzerine eklenir

etiketi kullanarak tekrarları ve diğer özellikleri de belirtebilirsiniz

Örneğin: bir düğmeye eklenen temel bir görüntüde şu kod bulunur:

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

Barış