使用背景图像和文本创建自定义HTML按钮

Question

我想知道如何创建一个自定义的HTML按钮，它有一个背景图片，并且我可以在图片上显示自定义文本。

例如，我想显示一个提交按钮，为此我有一个按钮的背景图像，并且文本“提交”显示在该图像的顶部。

我尝试过这个 -

<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">

然而，它不能正常工作。我只看到测试提交和按钮，但图片没有显示出来。

- learner2010

---

检查图片是否在应该的位置，没有损坏，并且您已经为其设置了正确的路径。像Firebug或Chrome的检查器这样的工具在这里非常有用。 - Bojangles

我已经检查过了，图片位置正确。 - learner2010

Answer 1

我建议您使用<button>而不是<input type='submit' />或<input type='button' />。原因是您可以嵌入HTML元素（嵌套元素）到<button>元素中。这样，您可以创建一个更加灵活的按钮，甚至可以进行更多定制。

<button>
    <span class='image'></span>
    <span class='text'>Click Me!</span>
</button>

- Saeed Neamati

Answer 2

<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">

您需要指定图像的宽度和高度，以使其覆盖按钮，并检查图像的路径。

这正是我在我的某个CSS中使用的方法，通常在这种情况下我会这样做：

HTML

<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>

css

.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}

- Andres

Answer 3

最简单的方法可能是使用带有背景的按钮元素。使用填充属性使按钮适当地大。为按钮设置背景颜色是一个有用的预防措施，以防出现某些原因导致背景图像无法显示，使用与文本具有足够对比度的颜色（因此它应该与背景图像的颜色使用类似）。例如：

<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>

注意：在旧版本的IE中，按钮元素的实现存在几个错误。如果一个表单有多个提交按钮，则这些错误会最严重地影响使用。

使用input type=submit元素时失败的原因是，它们通常由浏览器使用内置程序实现，这些程序对CSS相当免疫。

- Jukka K. Korpela

Answer 4

这是我如何创建带有实际图片和文本的按钮。在CSS中，我放置了：

button {
    display: inline-block;
    height: 200px;
    padding: 2px;
    margin: 2px;
    vertical-align: top;
    width: 400px;
 }

#alldogs-close-CSS {
     background-image: url( All_dogs.jpg );
     /*background-size: 100px 130px;*/
     height: 150px;
     width: 300px;
}

这个按钮控制我的高度和宽度，#alldogs-close-CSS 是我想在按钮上显示的图片。

在我的 Index.html 页面中，我只是放置了：

<button id="alldogs-close-CSS">All Dogs</button>

现在这段文本看起来还不太美观，但我还没有对它进行过修改。不过它确实可以工作。

- Kelly M Curtis