HTMLの<button>要素にpng画像を表示しようとしています。 ボタンは画像と同じサイズで、画像は表示されますが、何らかの理由で中央に表示されないため、すべて見ることは不可能です。 つまり、画像の右上隅がボタンの中央にあり、ボタンの右上隅にはないようです。<button>要素に画像を埋め込む
これは、HTMLコードです：
<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>
更新：
実際に何が起こる、私が思うに、マージンの問題です。私は2ピクセルのマージンを得て、バックグラウンドイメージはボタンから出ています。あなたが入力タイプの画像を使用することができます...私はmargin:0、padding:0を試してみましたが、それは助けにはならなかった...
ボタンや画像だけで20pxで同じ大きさ、あるので、それは非常に顕著です。
<input type="image" src="http://example.com/path/to/image.png" />
ボタンとして機能し、イベントハンドラをアタッチすることができます。
また、CSSを使用して背景画像でボタンのスタイルを設定し、罫線や余白などを適切に設定することができます。
<button style="background: url(myimage.png)" ... />
...フォームを送信するにはJavaScriptが必要ありません。 – ComFreek
-1： "* Should *"はあまりにも強すぎます。これは実際にはが設計されたものではないためです。なぜあなたはCSSを提案しませんでしたか？ –
@madmartigan編集されました。 –
この
<input type="button" style="background-image:url('your_url')"/>
ボタンがイメージを直接サポートしていないしてみてください。また、あなたがやっている方法は、リンク（）のためである
画像はスタイルのbackground-imageプロパティを使用してボタンの上に追加されたあなたはまた、例えば、タグ
を使用してリピートおよびその他のプロパティを指定することができます
：
<button style="background-image:url(myImage.png)">
平和
正式な[documentation]（https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html）の回答が間違っています。許可されます。 – biphobe
画像のようなセマンティックデータの一部（ある場合：基本的なイメージは、このコードを持っているでしょうボタンに追加しましたプロフィール画像など）を入力し、<button>の中に<img>要素を使用し、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;
}
出力：
あなたのコードを借りれば大丈夫ですか？ :) –
@Madmartiganもちろんそうではありません！頑張れ。 :) – ThinkingStiff
@ThinkingStiff ''を意味すると思います;） –
ComFreek
プロジェクトにイメージの名前の新しいフォルダを追加します。いくつかの画像をImagesフォルダに入れます。その後、正常に動作します。
<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">
このコードを試してみてください。
<button onclick="myFunction()"><img src="your image name here.png"</button>
は、それは私のためにうまく働きました。
私にとって、これは完璧に動作します...あなたはこれを体験している状況ですか？可能なコードの数行を掲載可能ですか？ –
あなたは[JS Fiddle]（http://jsfiddle.net/）のようなライブサイトでこれを再現できますか？ –