web-dev-qa-db-ja.com

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

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

これはHTMLコードです：

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

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

htmlcssimagebutton
99
Amit Hagin

あなたは入力タイプの画像を使用することができます。

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

これはボタンとして機能し、イベントハンドラを添付することができます。

あるいは、CSSを使用してボタンに背景画像をスタイルし、枠線、余白などを適切に設定することもできます。

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

画像が（プロフィール写真などの）セマンティックデータである場合は、<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;
}

出力：

enter image description here

58
ThinkingStiff

これを試して

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

ボタンに画像を入れる最も簡単な方法：

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

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

4
Eli Davies

なぜonclick属性を持つ画像を使わないのですか？

例えば：

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

プロジェクトにImagesという名前の新しいフォルダを追加します。いくつかの画像をImagesフォルダに置きます。それからそれはうまくいきます。

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