19

我想使用提交按钮图像而不是标准按钮。我在 Google 和 SO 上进行了搜索，得到了几种不同的方法。

使用图像作为提交按钮的正确方法是什么？

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

我试过的

HTML

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

CSS

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

出现了什么

在此处输入图像描述

它应该显示什么

在此处输入图像描述

4

5 回答 5

28

编辑：

我认为您正在尝试按照此演示中的方式进行操作

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

您需要为按钮状态使用CSS Image Sprites。

查看 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" />

于 2012-08-02T07:05:40.620 回答
11 
<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:...;
}
于 2012-08-02T06:44:34.603 回答
8

<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
标准提交按钮有的地方TYPE="submit"，我们现在有TYPE="image"。图像类型默认为表单提交按钮。更简单

于 2013-03-16T03:57:19.903 回答
4

出于可访问性的原因，即使您隐藏此文本，或者如果您使用<input type="image" .../>始终指定alt=""此输入字段的属性，您始终指定提交的值非常重要。

盲人不知道如果按钮不包含有意义的alt=""或value="".

于 2013-03-19T12:25:15.400 回答
3

您必须删除边框并在输入上添加背景图像。

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

现在应该好了，正常。

于 2012-08-02T09:34:05.893 回答