使用背景图像设置提交表单按钮？

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

我发现，解决问题的方法，为迈克尔·小号克莱尔提到我只需要在css中使用background而不是background-image。这删除了默认的浏览器图像，并没有显示我选择的图像。

我用，现在已经解决了该问题不同的方法，我尝试过，但与background-image标签，而不是只用background此方法，因为迈克尔·圣克莱尔建议，而这一切都和现在有固定的问题。

HTML

<input class="btnSearch" id="btnSearch" name="btnSearch" type="submit" value=""> 

CSS

.btnSearch{ 
    width:25px; 
    height:25px; 
    margin-top:27.5px; 
} 

input#btnSearch{ 
    background:url(../IMAGES/btnSearch.svg) no-repeat; 
} 

Answer 2

您需要使用只是background

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

Answer 3

添加background-size:100% 100%到您的按钮的CSS。这样的事情：http://codepen.io/shreya1289/pen/QEKGWa