使用背景圖像設置提交表單按鈕？

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