CSS 如何使我的 <input type="submit" /> 成为图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12875911/
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
How can I make my <input type="submit" /> an image?
提问by Lindsay
I have a beautiful little CSS image that needs to be a button. I've tried about 20 different methods, none of which work. I just either get a blank nothing or a border with nothing inside.
我有一个漂亮的小 CSS 图像，需要是一个按钮。我尝试了大约 20 种不同的方法，但都没有奏效。我只是得到一个空白的空白或一个里面什么都没有的边框。
The html: http://lrroberts0122.github.com/DWS/lab6/level-2/
html：http: //lrroberts0122.github.com/DWS/lab6/level-2/
The image: http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png
图片：http: //lrroberts0122.github.com/DWS/lab6/level-2/images/button.png
The CSS: http://lrroberts0122.github.com/DWS/lab6/level-2/css/main.css
CSS：http: //lrroberts0122.github.com/DWS/lab6/level-2/css/main.css
I can't change it to "submit" for certain reasons, so I need to figure out how to make this work with CSS. Thank you for your help!
由于某些原因，我无法将其更改为“提交”，因此我需要弄清楚如何使用 CSS 使其工作。感谢您的帮助！
回答by Jukka K. Korpela
Use an image submit button, as the docsays:
使用图像提交按钮，如文档所述：
<input type="image">defines an image as a submit button
<input type="image">将图像定义为提交按钮
<input type=image src=button.png alt="Submit feedback">
(I would not use an image suggesting snailmail when setting up an online form, but maybe there is some reason to create such associations.)
（我不会在设置在线表单时使用暗示蜗牛邮件的图像，但也许有一些理由来创建这样的关联。）
回答by Zoltan Toth
input[type=submit] {
background: url(http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png);
border: 0;
display: block;
height: _the_image_height;
width: _the_image_width;
}
回答by alvin
simple and easy way to make an INPUT tag as an image
将 INPUT 标签制作为图像的简单方法
<input type="submit" value="" style="background-image: url('images/img.png'); border:none; background-repeat:no-repeat;background-size:100% 100%;">
回答by Tom
You can override the style given by the browser to the button.
您可以覆盖浏览器为按钮提供的样式。
For example adding this to your css does the trick for me (on Chrome):
例如，将它添加到您的 css 对我来说很有效（在 Chrome 上）：
.controls input {
background: url(' http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png') -411px -540px no-repeat;
width: 199px;
height: 109px;
border: none;
}
But really if you are not going to use the browser's css for the button, you should probably not use <input type='submit'>at all, and just insert the image (via an <img src="" />tag or a <div>with the image as background) and attach a click listener to it.
但实际上，如果您不打算将浏览器的 css 用于按钮，您可能根本不应该使用<input type='submit'>，而只需插入图像（通过<img src="" />标签或<div>以图像为背景的 a）并为其附加一个单击侦听器。
For example:
例如：
The html:
html：
<div class="controls">
<img src="/yourimage.png" />
</div>
The javascript (assuming you use jQuery):
javascript（假设您使用 jQuery）：
$('.controls img').click(function(){... stuff to do...});
回答by NetStarter
HTML :
HTML :
<lable>From css class</lable><input class="input" onclick="alert('clicked')" type="button" value="" /><br/>
<lable>From HTML tag</lable>
<input type="button" style="background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);" onclick="alert('clicked')"/>
CSS :
CSS :
.btn{
display: inline-block;
background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);
position: relative;
border-radius: 5px;
}
.input{
background: transparent;
color: #fff;
border: 0;
padding-right: 20px;
cursor: pointer;
position: relative;
padding: 5px 20px 5px 5px;
z-index: 1;
}
JS Fiddle :http://jsfiddle.net/AJNnZ/26/
JS小提琴：http : //jsfiddle.net/AJNnZ/26/
回答by alexg
Another way that's kind of hackish is this (using jQuery):
另一种有点hackish的方法是（使用jQuery）：
<div onclick="$(this).parent('form').submit();"></div>
Then you style your divany way you like.
然后你可以用div任何你喜欢的方式来设计你的风格。
