html - 使用 HTML5 创建带有图像和标签的水平按钮

Question

尝试使用 HTML5 创建三个带有图像和标签的水平按钮。尝试了以下示例：tutorial，但我需要为每个按钮提供不同的图像。

如果我给每个按钮 id 并添加到 css #id {background-image:url} 我只看到图像的一部分，而不是拉伸到按钮大小的图像。

Answer 1

您可以为三个按钮创建三个不同的类名，并根据需要设置 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>

这里的演示：小提琴

Answer 2

我从目标站点复制了一些代码。注意下面的高度和宽度

...

宽度：78px；

高度：23px；

...

背景图像：url（tabsquare.jpg）；

...

}

.hbuttons：悬停{

背景图像：url（tabsquareover.jpg）；

}

它不会拉伸图像。它制作了一个 78px x 23px 的盒子。然后它将图像置于背景中。如果您希望图像覆盖 78px x 23px，则它应该是 78px x 23px。背景图像与<img>标签不同。