创建带有背景图像和文本的自定义html按钮

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

例如，我想显示一个提交按钮，我有一个该按钮的背景图像，文本“提交”位于该图像的顶部

我试过这个-

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

但是，它不能正常工作。我只看到测试提交和按钮，但图像没有显示

---

如果有人能帮我解决这个问题，那就太好了。

我建议您使用

而不是

或

。原因是您可以将HTML元素（嵌套元素）嵌入

元素中。通过这种方式，您可以制作一个更灵活的按钮，它可以定制得更多

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

点击我！

最简单的方法可能是使用带有背景的按钮元素。使用填充属性等使按钮适当大。为按钮设置背景色是一种有用的预防措施，当背景图像因某种原因未显示时，使用与文本具有足够对比度的颜色（因此其颜色用法应与背景图像类似）。例如：

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

开始！

警告：在旧版本的IE中，按钮元素的实现中有几个bug。如果一个表单有多个提交按钮，那么bug的危害最大

---

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

以下是我如何创建按钮，按钮上带有实际图片和文本。在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>

所有狗

---

现在的文字不是很好看，但我还没有玩过。不过，它确实可以工作。

检查图像是否在它应该位于的位置，是否损坏，以及是否为其设置了正确的路径。像Firebug或Chrome's inspector这样的工具在这里非常有用。我确实检查过。。图像位于正确的位置。。。

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

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;
}

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