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

Question

how to set background image in submit button?

I have to use a image in place of regular submit button? which way would be best in xhtml/css?

Button should look same in all main browsers including IE6,IE7

Answer 1

The way I usually do it, is with the following 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;
}

and the markup:

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

If things look different in the various browsers I implore you to use a reset style sheet which sets all margins, padding and maybe even borders to zero.

Answer 2

Typically one would use one (or more) image tags, maybe in combination with setting div background images in css to act as the submit button. The actual submit would be done in javascript on the click event.

A tutorial on the subject.

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