用图像替换默认提交按钮不起作用答案

【问题标题】：replace default submit button with image not working用图像替换默认提交按钮不起作用
【发布时间】：2014-06-20 15:42:57
【问题描述】：

我正在尝试将我的提交按钮替换为使用 CSS 中的背景图像的图像，但这会给它一个背景图像，但默认的提交按钮仍然在前景中，上面有文本。我也尝试在我的 HTML 中添加图像，但它没有显示图像，我猜是因为类型仍然是提交。有没有办法在不将其更改为 type=image 的情况下做到这一点？当然，正如我所看到的那样，它适用于其他示例，但由于某种原因它在我的身上不起作用：/

这是我的代码： http://jsfiddle.net/e94yh/

HTML

 <input type="submit" id="submit" value="Submit" src="../assets/images/submit.png"/>
</form>

CSS

 input[type=submit]{
cursor: pointer;
 }

 #submit {
width:100px;
height:auto;
 }

【问题讨论】：

标签： html css forms submit

【解决方案1】：

使用background:url(''); 和color:transparent;

CSS

input[type=submit]{
background:url('../assets/images/submit.png');
cursor: pointer;

颜色：透明； }

而不是src=""

FIDDLE DEMO

【讨论】：

这只是给提交按钮一个背景图像，我仍然可以在图像顶部看到提交文本。
@ev9604 只需使用颜色：透明；
@ev9604：我想我的回答已经帮助你获得了提交按钮的背景图片

【解决方案2】：

Demo

我猜你需要使用type="image" 来实现你想要的。

带有图像的输入按钮：

<input type="image" src="../assets/images/submit.png" value="submit" id="submit">

使用 CSS 来设置按钮样式

<input type="submit" class="myButton" value="submit" id="submit">

.myButton {
    background:url(../assets/images/submit.png) no-repeat;
    cursor:pointer;
    width: 100px;
    height:auto;
}

【讨论】：

【解决方案3】：

我意识到如果我将值更改为“”，它会删除提交文本。

【讨论】：

检查我的小提琴并回答..!!使用颜色透明..!!