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

Question

我正在尝试使用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;
 }

Answer 1

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

<强> CSS

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

颜色：透明;      }

而不是src=""

FIDDLE DEMO

Answer 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;
}

Answer 3

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