如何使用CSS更改inputbutton图像？
所以，我可以使用一个图像创build一个inputbutton
<INPUT type="image" src="http://img.dovov.comBtn.PNG" value=""> 但是，我不能使用CSS获得相同的行为。 例如，我试过了
<INPUT type="image" class="myButton" value="">
其中“myButton”在CSS文件中定义为
.myButton { background:url(http://img.dovov.comBtn.PNG) no-repeat; cursor:pointer; width: 200px; height: 100px; border: none; }
如果这就是我想要做的，我可以使用原始样式，但是我想要改变button的hover外观（使用myButton:hover类）。 我知道链接是好的，因为我已经能够加载他们为页面的其他部分的背景图像（就像一张支票）。 我在网上find了如何使用JavaScript做的例子，但我正在寻找一个CSS解决scheme。
我正在使用Firefox 3.0.3，如果这有所作为。
如果你想使用CSS来设置button的风格，可以使用type =“submit”button来代替type =“image”。 type =“image”需要一个SRC，你不能在CSS中设置。
请注意，Safari不会让您按照您要查找的方式devise任何button。 如果您需要Safari支持，则需要放置图像并使用提交表单的onclick函数。
您可以使用<button>标签。 对于提交，只需添加type="submit" 。 然后使用背景图像，当您想要button显示为graphics。
像这样：
<button type="submit" style="border: 0; background: transparent"> <img src="http://img.dovov.comBtn.PNG" width="90" height="50" alt="submit" /> </button>
更多信息： http : //htmldog.com/reference/htmltags/button/
HTML
<div class="myButton"><INPUT type="submit" name="" value=""></div>
CSS
div.myButton input { background:url(http://img.dovov.comBtn.PNG) no-repeat; cursor:pointer; width: 200px; height: 100px; border: none; }
这将在任何地方，即使在Safari。
这篇文章关于CSS图像replace提交button可以帮助。
“使用这种方法，当样式表处于活动状态时，会获得一个可点击的图像，样式表closures时会出现标准button。技巧是将图像replace方法应用到button标签，并将其用作提交button，而不是使用input。
而且由于button边框被删除，所以也build议将button光标改变为用于链接的手形button，因为这为用户提供了视觉提示。
CSS代码：
#replacement-1 { width: 100px; height: 55px; margin: 0; padding: 0; border: 0; background: transparent url(image.gif) no-repeat center top; text-indent: -1000em; cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ } #replacement-2 { width: 100px; height: 55px; padding: 55px 0 0; margin: 0; border: 0; background: transparent url(image.gif) no-repeat center top; overflow: hidden; cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ } form>#replacement-2 { /* For non-IE browsers*/ height: 0px; }
这是一个更简单的解决scheme，但没有额外的周边div：
<input type="submit" value="Submit">
CSS使用基本的图像replace技术。 对于奖励积分，它显示使用图像精灵：
<style> input[type="submit"] { border: 0; background: url('sprite.png') no-repeat -40px left; text-indent: -9999em; line-height:3000; width: 50px; height: 20px; } </style>
资料来源： http : //work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/
您可以在您的标记中使用blank.gif（1px透明图像）作为目标
<input type="image" src="img/blank.gif" class="button">
然后在CSS样式背景：
.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;} .button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}
以前的答案的变化。 我发现，需要设置不透明度，当然这将在IE6和以上工作。 IE8中的行高解决scheme存在一个问题，即button不响应。 而且你也得到了一个手形光标！
<div id="myButton"> <input id="myInputButton" type="submit" name="" value=""> </div> #myButton { background: url("form_send_button.gif") no-repeat; width: 62px; height: 24px; } #myInputButton { background: url("form_send_button.gif") no-repeat; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); width: 67px; height: 26px; cursor: pointer; cursor: hand; }
这是我在IE浏览器上的工作，对Philoye的解决scheme稍作修改。
>#divbutton { position:relative; top:-64px; left:210px; background: transparent url("../..http://img.dovov.comlogin_go.png") no-repeat; line-height:3000; width:33px; height:32px; border:none; cursor:pointer; }
我认为以下是最好的解决scheme：
CSS：
.edit-button { background-image: url(edit.png); background-size: 100%; background-repeat:no-repeat; width: 24px; height: 24px; }
HTML：
<input class="edit-button" type="image" src="transparent.png" />
我没有js和没有图像的解决scheme是这样的：
* HTML：
<input type=Submit class=continue_shopping_2 name=Register title="Confirm Your Data!" value="confirm your data">
* CSS：
.continue_shopping_2:hover{ background-color:#FF9933; text-decoration:none; color:#FFFFFF;} .continue_shopping_2{ padding:0 0 3px 0; cursor:pointer; background-color:#EC5500; display:block; text-align:center; margin-top:8px; width:174px; height:21px; border-radius:5px; border-width:1px; border-style:solid; border-color:#919191; font-family:Verdana; font-size:13px; font-style:normal; line-height:normal; font-weight:bold; color:#FFFFFF;}
也许你可以导入一个.js文件，然后在JavaScript中replace图片。
