css - 背景奇怪的提交按钮

Question

我有一个提交按钮，我使用的图像在悬停时会发生变化，但按钮上的背景是灰色的，我无法将其删除。

我确定这不是我的图片!

HTML:

<form method="POST" action="add.php" onsubmit="return validateForm();">
  <input type="text" name="name" id="input" maxlength="35" placeholder="NOME COMPLETO" autocomplete="off" />
  <input type="submit" src="add.png" class="submit" value="">
</form>

CSS:

.submit {
    position: absolute;
    cursor: pointer;
    border: none;
    top: 45%;
    left: 73%;
    width: 45px;
    height: 45px;
    background-image: url(add.png);
    background-repeat: no-repeat;
}

.submit:hover {
    position: absolute;
    cursor: pointer;
    border: none;
    top: 45%;
    left: 73%;
    width: 45px;
    height: 45px;
    background-image: url(add-hover.png);
    background-repeat: no-repeat;
}

请大家帮帮我!我很绝望

Answer 1

我已经为你的案例创建了一个 fiddle :http://jsfiddle.net/K7yx4/

这个可以工作，因为我已经纠正了一些错误:

首先:

如果您已经使用 CSS 获取图像，则不需要在 input 上使用 src 属性。(反之亦然)

我已经关闭了 input[type=submit] 标签 (/>)

在 CSS 中，您不需要复制伪类的所有属性和值。只有真正改变需求的值才是必要的。

看看 fiddle ，我想你会自己弄明白的!