画像ボタンを作成します。ホバー上でボタンが変わるはずです。 CSSで画像を設定したので、コード内にsrcという属性を使う必要はありません。 Chrome、Safariは正常に動作しますが、Firefox 48では入力のサイズが完全に無視されます。私はCSSとHTMLの両方を試みました。バグですか？正しい方法は何ですか？入力タイプ= "画像"でFirefoxが幅と高さを無視します
フィドル： https://jsfiddle.net/nyppzpqx/5/
ここでは、Firefox 48での図である。
あなたは.btn-pay要素にdisplay: blockを追加した場合、それだけで正常に動作します。カスタムブラウザスタイルのものかもしれません。
と言われていますが、タップの説明によると、src属性を使用しないimg要素の使用は避ける方がよいでしょう。
いつでも、HTMLの書き方を再構成することができます。この方法では、src属性は必要ありません。
<div class="btn-pay">
<input type="button" name="kind" value="test" class="btn-pay-input" >
</div>
、次いでスタイリング更新：ここで
.btn-pay {
width:135px;
height: 60px;
}
.btn-pay-input {
background: url(http://placehold.it/135x60);
color: transparent;
transition: all 0.3s;
width:100%;
height:100%;
text-align:center;
}
.btn-pay-input:hover {
background: url(http://placehold.it/135x60/fff000);
}
のサイズは、全体のdivにまたがる画像と外側のdivに与えられ、その後、ボタンがその上に配置されていますfiddle
私は仕様を見ていませんが、画像入力にはsrcが必要であると思います。それ以外の場合は、送信タイプを使用することもできます。 – Turnip
^そうです。 ''私のコードでsrc属性を使用する必要はありません。 ''しかし、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/imageは、 "あなたはsrc属性を使用して画像のソースを定義してください。 " – henry
ありがとうございます。 入力タイプをsubmitに変更し、デフォルトのスタイリングを 'border：none;'で削除しました。正常に動作します。 – user1201917