html - 设置带有背景图片的提交表单按钮？

Question

我只是想在我的表单中为我的提交按钮设置一个背景图像。我尝试了几种不同的方法，但每次我都使用默认的浏览器按钮。有人知道我哪里出错了吗？

HTML

<div id="headerSearch">
    <form method="post" action="Test.php">
        <div id="headerSearchBar">
            <input class="tbSearch" type="text" name="search" size="12" placeholder="Search...">
        </div>
        <div id="headerSearchBtn">
            <input class="btnSearch" id="button" name="submit" type="submit" value="">
        </div>
    </form>
</div>

CSS

#headerSearch{
    float:right;    
    width:80%;
    height:80px;
}
#headerSearchBar{
    float:left;
    width:90%;
    height:80px;

}
.tbSearch{
    height:25px;
    width:95%;
    margin-top:27.5px;
    margin-left:2%;
    margin-right:0;
    margin-bottom:0
}
#headerSearchBtn{
    float:right;
    width:10%;
    height:80px;
    text-align:center;
}
.btnSearch{
    background-image:url(../IMAGES/btnSearch.svg) no-repeat;
    width:25px;
    height:25px;
    margin-top:27.5px;
}

Answer 1

你只需要使用background

background:url(../IMAGES/btnSearch.svg) no-repeat;