Question

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

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

Answer 1

我从目标网站复制了一些代码。注意

下面的高度和宽度

...

width: 78px;

height: 23px;

...

background-image:url(tabsquare.jpg);

...

}

.hbuttons a:hover{

background-image:url(tabsquareover.jpg);

}

它不会拉伸图像。它制作一个78px x 23px的盒子。然后它将图像放在背景中。如果你想要图像覆盖78px x 23px，它应该是78px x 23px。背景图像与<img>标记不同。

Answer 2

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

此处演示：fiddle

使用HTML5在其下创建带有图像和标签的水平按钮

2 个答案: