创建带有背景图像和文本的自定义 html 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8449358/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a custom html button with background Image and Text
提问by learner2010
I would like to know how I can create a custom HTML button which has a background Image and I can show a custom text over that image.
我想知道如何创建一个具有背景图像的自定义 HTML 按钮，并且我可以在该图像上显示自定义文本。
For example, I would like to show a submit button for which I have a background image for that button and the text "Submit" comes on top of that Image.
例如，我想显示一个提交按钮，我有该按钮的背景图像，并且文本“提交”位于该图像的顶部。
I tried this -
我试过这个 -
<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">
However, it does not work properly. I just see the test submit and the button but the image does not show up.
但是，它不能正常工作。我只看到测试提交和按钮，但图像没有显示。
It would be great if someone could help me out with this.
如果有人能帮我解决这个问题，那就太好了。
采纳答案by Jukka K. Korpela
The simplest way is probably to use a button element with a background. Use e.g. padding properties to make the button suitably large. It is a useful precaution to set a background color for the button, for use when the background image is not shown for some reason, using a color that has sufficient contrast with the text (so it should be similar in color usage to the background image). Example:
最简单的方法可能是使用带有背景的按钮元素。使用例如填充属性使按钮适当大。为按钮设置背景颜色是一个有用的预防措施，当由于某种原因没有显示背景图像时，使用与文本具有足够对比度的颜色（因此它应该在颜色使用上与背景图像相似） ）。例子：
<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>
Caveat: In old versions of IE, there are several bugs in the implementation of button elements. The bugs bite most seriously if a form has several submit buttons.
警告：在旧版本的 IE 中，按钮元素的实现存在一些错误。如果一个表单有多个提交按钮，那么 bug 会最为严重。
The reason for the failure when using an input type=submit element is that they are commonly implemented by browsers using built-in routines that are rather immune to CSS.
使用 input type=submit 元素失败的原因是它们通常由浏览器使用内置例程来实现，而这些例程对 CSS 免疫。
回答by Saeed Neamati
I recommend that you use <button>instead of <input type='submit' />or <input type='button' />. The reason is that you can embed HTML elements (nest elements) into the <button>element. This way, you can make a much more flexible button, which can be customized even more.
我建议您使用<button>而不是<input type='submit' />或<input type='button' />。原因是您可以将 HTML 元素（嵌套元素）嵌入到<button>元素中。这样，您可以制作一个更灵活的按钮，可以进行更多自定义。
<button>
<span class='image'></span>
<span class='text'>Click Me!</span>
</button>
回答by Andres
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">
you have to specify the width and height of the image so it covers your button and yes check the path of the image
您必须指定图像的宽度和高度，以便它覆盖您的按钮，然后检查图像的路径
this is exactly what I have in one of my css and usually what I do in this situation:
这正是我在我的一个 css 中所拥有的，通常是我在这种情况下所做的：
html
html
<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>
css
css
.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
回答by Kelly M Curtis
Here's how I created buttons with actual pics on them along with text. In CSS I put:
这是我如何创建带有实际图片和文本的按钮。在 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;
}
The button controls my height and width and #alldogs-close-CSSis the pic I wanted to show on the button.
按钮控制我的高度和宽度，#alldogs-close-CSS是我想在按钮上显示的图片。
In my Index.html page I just put:
在我的 Index.html 页面中，我只是放了：
<button id="alldogs-close-CSS">All Dogs</button>
Now the text isn't very pretty at the moment, but I haven't played with it yet. It does work, though.
现在文字现在不是很漂亮，但我还没有玩过。不过，它确实有效。
