用CSS 实现 image按钮 详解 带实例

今天遇到一个问题，写下来方便大家以后遇到同样的总是，不用再浪费时间去研究.
image button可以<input type="image" src="some.jpg" />来简单地实现。
但由于某些原因(比如下面的原因)，我们可能希望使用CSS来实现image按钮。
原由：
<input type="image" ... 提交时会发现URL后面跟着x,y这样参数，看上去很不爽，对SEO来说更不爽,于是改成用 <input id="submit"....
下面就用了CSS实现 image 按扭:

////////////css //////////////////
.submitGo{
background-color: transparent;
border: 0px;
padding: 0px;
overflow: hidden;
font-size:0px; /* 把文字的大小设置为0，不显示文字 */
width: 82px; /* backgroud-image width */
height: 40px; /* backgroud-image height */
margin-left: 10px; /* 可以不用，我用来表示与前面输入框的距离的 */
cursor:pointer; /* 兼容IE，FF 放上去出现小手 */
background-image: url(../img/go.gif);
}
//////////// End css //////////////////
<input id="submit" value="Go" type="submit" class="submitGo">

以上代码，CSS图像按钮就完成了。提交时不会出现不想要的参数了.
如果不希望显示图片时，只需注释CSS定义或是把class去掉就可以了