3

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

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

我试过这个 -

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

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

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

4

4 回答 4

7

我建议您使用<button>代替<input type='submit' />or <input type='button' />。原因是您可以将 HTML 元素（嵌套元素）嵌入到<button>元素中。这样，您可以制作更灵活的按钮，并且可以进行更多自定义。

<button>
    <span class='image'></span>
    <span class='text'>Click Me!</span>
</button>
于 2011-12-09T17:33:18.177 回答
4 
<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;}
于 2011-12-09T17:34:49.643 回答
1

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

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

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

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

于 2011-12-09T19:12:28.057 回答
0

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

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

于 2015-06-08T04:05:23.063 回答