画像をHTMLとCSSでボタンとして使用する

Question

私はGame Assetsコレクションを使用してゲームを構築しています。現在発生している主な問題は、ユーザーインターフェイスボタンを含める方法です。

現在、ボタンは、さまざまなグラデーションと特定のフォントのコレクションです。イメージグラデーションをバックグラウンドプロパティに変換しようとしましたが、失敗しました。使用されているフォントは、イメージで表される文字のコレクションです。

この問題を解決するベストプラクティスは何ですか？画像をボタンとして使用しますか？正しいセマンティックマークアップとは何ですか？

Example of a Button

ボタン

のthnxの意味！この質問に対する回答ではありますが、それを行う方法ではありません。しかし正しいセマンティックマークアップについて。

現在、私は妥当と思われる以下の設定で解決しました。あなたが入力を使用する場合は

<label> 
    <img src="/aButton.png" alt="Send Message"> 
</label> 

Answer 1

てみてください、次のように

HTML

<input type="submit" id="search" name="submit" alt="search" value=""> 

CSS

input#search { 
background:url(../search-icon.png); 
background-repeat: no-repeat; 
width:40px; 
height:40px; 
border: 0; 
} 
input#search:hover { 
    background:url(../search-icon2.png); 
    background-repeat: no-repeat; 
    width:40px; 
    height:40px; 
    border: 0; 
    } 

Answer 2

、これを試してみてください。

background-image: url(...); 
 
background-repeat: no-repeat; 
 
background-position: <left|right>; 
 
padding-<left|right>: <width of image>px;

<button type="submit"><img></img></button>