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

Question

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

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

我试过这个 -

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

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

原文由 learner2010 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

警告：在旧版本的 IE 中，按钮元素的实现存在多个错误。如果一个表单有多个提交按钮，则这些错误最严重。

使用 input type=submit 元素失败的原因是它们通常由浏览器使用不受 CSS 影响的内置例程实现。

原文由 Jukka K. Korpela 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 Saeed Neamati 发布，翻译遵循 CC BY-SA 3.0 许可协议