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中完成。

关于这个主题的tutorial。

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

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

5 个答案: