バックグラウンド画像でボタンをスタイルする方法

Question

バックグラウンド画像を持つボタンの灰色の枠線を削除するのに問題があります。私はjsfiddleで一緒に公共の例を入れてみましたし、画像スプライトも表示に失敗したとして、私も仕事に適切な例を取得することはできません。

http://jsfiddle.net/3vPpt

だから私の二つの質問は次のとおりです。

1）私の背景に背景画像が表示されないのはなぜですか？

2）スプライトが表示されたら、元のボタンである灰色の枠線を取り除くにはどうすればよいですか？私はスプライトが表示されるだけです。

Answer 1

Try this提出するのonclickでのdivを使用しています。

あなたが画像要素に、いないボタンにスタイルを適用したように見えます。たとえ空の画像であっても、画像要素に背景画像スタイルを適用することはできません。画像要素はインライン要素である可能性があります。

また、border：noneも追加しました。ボタンの境界線のスタイルを取り除くボタンに移動します。それでもまだ変なパディング/マージンの問題が発生する可能性がありますが、それは別の質問のためにすることができ

注意。 Firefoxでは、少なくとも、ボーダーを削除してもボタン要素に余分な数のピクセルを適用するのが好きです。

Answer 2

その場合、フォームの使用入力タイプのイメージは...またはちょうど

Answer 3

ボタンタグに「thumb_up」クラスを適用しようとすると、このようなボタンの内側からIMGを削除します。

<button class="thumb_up" onclick=";return false;" title="I LIKE" type="button" class=""> </button> 

「border：0;」を追加します。 "thumb_up" CSSへ

.thumb_up { 
    background: no-repeat url("http://www.mattsbits.co.uk/user_media/uploaded_media/sp2010_formatmap32x32.png") 0 0; 
    width: 200px; 
    height:200px; 
    border: 0; 
}