提交按钮图像

Question

我想要使用一个提交按钮图片来代替标准的按钮。我在Google和SO上搜索到了几种不同的方法。

哪种方法是正确的使用图片作为提交按钮的方法？

我还想为按钮添加三种状态 - 正常、悬停、点击。

我尝试过的：

HTML

<input type="submit" value="Subscribe">

CSS

input[type=submit] {
    background:url(../images/btn-subscribe.gif) none;
    text-indent:-9999px;
    width:109px;
    height:41px;
}

显示的内容是什么

它应该显示什么

- Harsha M V

---

要么删除text-indent并在<input>中添加value="Subscribe"，要么在图像上添加字母Subscribe。 - asprin

@Harsha M V：请看下面我的回答。 - Ahsan Khurshid

Answer 1

编辑：

我认为你正在尝试实现这个演示中展示的功能。

按钮有三种状态: 正常、悬停和激活

你需要使用CSS 图像精灵来实现按钮的状态。

详见 CSS Sprites 的奥秘

/*CSS*/

.imgClass { 
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position:  0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{ 
  background-position:  0px -52px;
}

.imgClass:active{
  background-position:  0px -104px;
}

<!-- HTML -->
<input type="submit" value="" class="imgClass" />

- Ahsan Khurshid

---

为了用户界面优化，我总是添加CSS规则cursor: pointer;。这会在鼠标悬停时将光标更改为手形图标，就像链接默认情况下所做的那样。 - Justus Romijn

警告，某些浏览器（Chrome）在提交时会强制应用某些样式。当您使用透明PNG作为提交背景时，会出现此问题 - 整体背景将具有颜色=“buttonface”，并且不会是100％透明的。请添加background-color：transparent。 - Piotr Müller

您使用的图片链接已经失效。 - Brian McCutchon

Answer 2

<input type="image" src="path to image" name="submit" />

更新：

对于按钮状态，您可以使用type="submit"，然后添加一个类

<input type="submit" name="submit" class="states" />

然后在CSS中，使用背景图片来：

.states{
background-image:url(path to url);
height:...;
width:...;
}

.states:hover{
background-position:...;
}

.states:active{
background-position:...;
}

- asprin

---

添加 name=submit 是关键吗？ - Harsha M V

如果我想添加按钮状态怎么办？ - Harsha M V

@HarshaMV 就像 lbu 所说的那样，name 可用于检查按钮单击事件。例如，在 PHP 中 if(isset($_POST['name']))。 - asprin

我已经更新了我的问题。当我尝试添加背景图片时，这就是我得到的内容。 - Harsha M V

@HarshaMV 在你的问题下面发表了评论。 - asprin

Answer 3

<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="提交表单">
标准的提交按钮使用TYPE="submit"，而现在我们有了TYPE="image"。图像类型默认是一个提交表单的按钮。更加简单。

- Ibnu

Answer 4

出于辅助功能的考虑，即使您隐藏了提交文本，或者使用 <input type="image" .../>，您也始终要指定提交的值，或为此输入字段指定 alt="" 属性。

如果没有含义明确的 alt="" 或 value=""，盲人将不知道按钮的功能。

- Pawel Wilga

Answer 5

您需要移除输入框的边框并添加背景图片。

.imgClass { 
    background-image: url(path to image) no-repeat;
    width: 186px;
    height: 53px;
    border: none;
}

现在应该正常了。

- phndiaye