提交按钮图片答案

【问题标题】：Submit Button Image提交按钮图片
【发布时间】：2012-07-31 02:54:30
【问题描述】：

我想使用提交按钮图像而不是标准按钮。我在 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;
}

出现了什么

应该显示什么

【问题讨论】：

要么删除 text-indent 并在 <input> 中添加 value="Subscribe"，要么在图像上添加字母 Subscribe
@Harsha M V：请参阅下面的答案。

标签： html css submit

【解决方案1】：

已编辑：

我认为您正在尝试按照 DEMO 中所做的那样做

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

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

See The Mystery of 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" />

【讨论】：

对于精灵，我通常远离background 简写，以尽量减少重复。在.imgClass 上使用background-image，在其他状态下使用background-position
@Zach L：已编辑，感谢您的建议。
为了优化用户界面，我总是添加 css-rule cursor: pointer;。它在悬停时将光标更改为手形图标，就像默认情况下的链接一样。
警告，某些浏览器 (Chrome) 会强制提交某些样式。当您使用透明 PNG 作为提交背景时会出现此问题 - 整体背景将具有 color = "buttonface" 并且不会 100% 透明。添加背景颜色：透明。
您使用的图片的链接已损坏。

【解决方案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:...;
}

【讨论】：

正在添加名称=提交密钥？
如果我想添加按钮状态怎么办？
@HarshaMV lbu 说了什么。 name 可用于检查按钮点击。例如：在 php 中 if(isset($_POST['name']))
更新了我的问题。这就是我尝试添加背景图像时得到的结果
@HarshaMV 在您的问题下方发表评论

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

如果按钮不包含有意义的alt="" 或value=""，盲人不知道它会做什么。

【讨论】：

【解决方案5】：

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

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

现在应该很好，通常。

【讨论】：