如何在提交按钮中设置背景图像？

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;
}