html - HTML5を使用して、その下に画像とラベルを含む水平ボタンを作成します

Question

HTML5を使用して、画像とラベルを含む3つの水平ボタンを作成しようとしています。次の例を試しました：チュートリアルですが、ボタンごとに異なる画像が必要です。

各ボタンIDを指定し、css #id {background-image：url}に追加すると、ボタンサイズに拡大された画像ではなく、画像の一部のみが表示されます。

Answer 1

ターゲット サイトからコードの一部をコピーしました。以下の高さと幅に注意してください

...

幅: 78px;

高さ: 23px;

...

背景画像:url(tabsquare.jpg);

...

}

.hbuttons a:hover{

背景画像:url(tabsquareover.jpg);

}

画像を引き延ばしません。78px x 23px のボックスを作成します。次に、画像を背景に配置します。画像を 78px x 23px にする場合は、78px x 23px にする必要があります。<img>背景画像はタグとは異なります。

Answer 2

3 つのボタンに対して 3 つの異なるクラス名を作成し、必要に応じて CSS の背景画像を設定できます。

<button class="hbuttons">and</button>
<button class="buttons">and</button>
<button class="hbutton">and</button>

また

 <div>
 <a class="hbutton" href="http://www.cssdrive.com">Home </a>
 <a class="buttons" href="http://www.cssdrive.com/index.php/main/submit/">Submit </a>
 <a class="hbuttons" href="http://www.cssdrive.com/index.php/main/contact/">Contact </a>
 </div>
  <div style="clear: left;"></div>

ここでデモ：フィドル