如何在提交按鈕中設置背景圖像？

Question

如何在提交按鈕中設置背景圖像？

我必須使用圖像代替常規提交按鈕？ 在xhtml / css中哪種方式最好？

在所有主流瀏覽器中，按鈕應該看起來相同，包括IE6，IE7

Answer 1

我通常這樣做的方式是使用以下css：

div#submitForm input {
  background: url("../images/buttonbg.png") no-repeat scroll 0 0 transparent;
  color: #000000;
  cursor: pointer;
  font-weight: bold;
  height: 20px;
  padding-bottom: 2px;
  width: 75px;
}

和標記：

<div id="submitForm">
    <input type="submit" value="Submit" name="submit">
</div>

如果各種瀏覽器中的內容看起來不同，我懇請您使用重置樣式表，將所有邊距，填充甚至邊界設置為零。

Answer 2

通常，人們會使用一個（或多個）圖像標簽，可能與在css中設置div背景圖像組合起來作為提交按鈕。 實際提交將在點擊事件的javascript中完成。

關於這個主題的教程 。

Answer 3

.button {
    border: none;
    background: url('/forms/up.png') no-repeat top left;
    padding: 2px 8px;
}

Answer 4

我喜歡這個封面按鈕和中間圖像

<button><img src="foldername/imagename" width="30px" height= "30px"></button>

Answer 5

您可以嘗試以下代碼：

background-image:url('url of your image') 10px 10px no-repeat