提交按钮图像
我想使用提交按钮图像而不是标准按钮.我在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;
}
出现了什么
它应该显示什么
Ahs*_*hid 28
编辑:
我想你正试图在这个DEMO中做到这一点
按钮有三种状态:正常,悬停和活动
您需要使用CSS Image 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" />- 精灵我通常远离背景速记,以尽量减少重复.在`.imgClass`上使用`background-image`,在其他状态使用`background-position` (4认同)
- 对于用户界面优化,我总是添加css-rule` cursor:pointer;`.它会在悬停时将光标更改为手形图标,就像默认情况下链接一样. (2认同)
- 警告,某些浏览器(Chrome)会在提交时强制使用某些样式.当您使用透明PNG作为提交背景时会出现此问题 - 整体背景将具有color ="buttonface"并且不会100%透明.添加背景颜色:透明. (2认同)
asp*_*rin 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:...;
}
小智 8
<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
标准提交按钮的位置TYPE="submit",我们现在有TYPE="image".图像类型默认为表单提交按钮.更简单