<button>要素に画像を埋め込む

<button>HTMLの要素にpng画像を表示しようとしています。ボタンは画像と同じサイズで、画像は表示されていますが、何らかの理由で中央に表示されていないため、すべてを表示することはできません。つまり、画像の右上隅がボタンの中央ではなく、ボタンの右上隅にあるように見えます。

これはHTMLコードです：

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

更新：
実際に起こるのは、マージンの問題だと思います。2ピクセルのマージンができるので、背景画像がボタンからはみ出します。ボタンと画像は同じサイズで、だけな20pxので、非常に目立ちます...、を試しましたがmargin:0、padding:0役に立ちませんでした...

入力タイプの画像を使用できます。

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

これはボタンとして機能し、イベントハンドラーをアタッチできます。

あるいは、cssを使用して、背景画像でボタンのスタイルを設定し、境界線、マージンなどを適切に設定できます。

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

画像がセマンティックデータ（たとえば、プロフィール写真など）の場合は、<img>内の要素<button>を使用し、CSSを使用してのサイズを変更し<img>ます。画像がボタンを視覚的に楽しいものにするための単なる方法である場合は、CSS background-imageを使用してスタイルを設定します<button>（およびを使用しないでください<img>）。

デモ：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;
}

出力：

これを試して

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

画像をボタンに配置する最も簡単な方法：

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

これにより、ボタンのサイズが画像のサイズに自動的に変更されます。

onclick属性付きの画像を使用してみませんか？

例えば：

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

プロジェクトに画像の名前で新しいフォルダを追加します。いくつかの画像を画像フォルダに入れます。その後、正常に動作します。

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

このフォーマットのようにして、「width」属性を使用して画像サイズを管理します。これは簡単です。JavaScriptは要素にも実装できます。

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

ボタンは画像を直接サポートしていません。さらに、あなたがしている方法はリンク用です（）

画像はスタイルのBackground-IMAGEプロパティを使用してボタンの上に追加されます

タグを使用して、繰り返しやその他のプロパティを指定することもできます

たとえば、ボタンに追加された基本的な画像には次のコードがあります。

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

平和