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

Question

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

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

我试过这个 -

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

但是,它无法正常工作.我只看到测试提交和按钮,但图像没有显示.

如果有人可以帮我解决这个问题会很棒.

Answer 1

我建议您使用<button>而不是<input type='submit' />或<input type='button' />.原因是您可以将HTML元素(嵌套元素)嵌入到<button>元素中.这样,您可以制作更灵活的按钮,可以进行更多定制.

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