我有一个需要有一个按钮，一个漂亮的小CSS图像。 我试着约20个不同的方法，其中没有工作。 我只是要么得到一个空白没有或边境里面什么都没有。
在html： http://lrroberts0122.github.com/DWS/lab6/level-2/
图像： http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png
CSS的： http://lrroberts0122.github.com/DWS/lab6/level-2/css/main.css
我不能改变它“提交”出于某些原因，所以我需要弄清楚如何使CSS这项工作。 谢谢您的帮助！
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;
}
使用图像提交按钮， 商务部称：
<input type="image">图像定义为一个提交按钮
<input type=image src=button.png alt="Submit feedback">
（我不会用的图像时，设置了一个在线的形式，但也许有某种原因，建立这样的关联暗示蜗牛邮件。）
您可以覆盖浏览器的按钮给出的风格。
例如添加给你的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;
}
不过说真的，如果你不打算使用浏览器的CSS的按钮，你可能不应该使用<input type='submit'>可言，只是插入图像（通过<img src="" />标签或一个<div>与图像作为背景）和附加一个点击监听它。
例如：
在HTML：
<div class="controls">
<img src="/yourimage.png" />
</div>
JavaScript的（假设你使用jQuery）：
$('.controls img').click(function(){... stuff to do...});
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：
.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小提琴： http://jsfiddle.net/AJNnZ/26/
简单易用的方式进行输入标签为图像
<input type="submit" value="" style="background-image: url('images/img.png'); border:none; background-repeat:no-repeat;background-size:100% 100%;">
这是一种hackish的另一种方式是这样的（使用jQuery）：
<div onclick="$(this).parent('form').submit();"></div>
然后你的风格你的div你喜欢的任何方式。
