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>

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

Answer 3

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

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

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

使用input type = submit元素时失败的原因是它们通常由使用内置例程的浏览器实现，而内置例程对CSS不太敏感。

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>

现在文字不是很漂亮，但我还没玩过它。但它确实有用。

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

4 个答案: