Html 提交按钮图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11772326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Submit Button Image
提问by Harsha M V
I want to use a Submit Button Image instead of the standard Button. I searched on Google and SO and got a few different ways.
我想使用提交按钮图像而不是标准按钮。我在 Google 和 SO 上搜索并得到了几种不同的方法。
Which is the right way of using an Image as a Submit Button ?
使用图像作为提交按钮的正确方法是什么？
Also i would want to add three states for the button - normal, hover, onclick
我还想为按钮添加三个状态 - 正常、悬停、点击
What i tried
我试过的
HTML
HTML
<input type="submit" value="Subscribe">
CSS
CSS
input[type=submit] {
background:url(../images/btn-subscribe.gif) none;
text-indent:-9999px;
width:109px;
height:41px;
}
What shows up
显示什么
What it should Display
它应该显示什么
回答by Ahsan Khurshid
Edited:
编辑：
I think you are trying to do as done in this DEMO
我认为您正在尝试按照本演示中的操作进行操作
There are three states of a button: normal, hover and active
按钮有三种状态：正常、悬停和活动
You need to use CSS Image Spritesfor the button states.
您需要为按钮状态使用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" />回答by asprin
<input type="image" src="path to image" name="submit" />
UPDATE:
更新：
For button states, you can use type="submit" and then add a class to it
对于按钮状态，您可以使用 type="submit" 然后为其添加一个类
<input type="submit" name="submit" class="states" />
Then in css, use background images for:
然后在 css 中，使用背景图片：
.states{
background-image:url(path to url);
height:...;
width:...;
}
.states:hover{
background-position:...;
}
.states:active{
background-position:...;
}
回答by Ibnu
<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
Where the standard submit button has TYPE="submit", we now have TYPE="image". The image type is by default a form submitting button. More simple
<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
在标准提交按钮的地方TYPE="submit"，我们现在有了TYPE="image". 图像类型默认为表单提交按钮。更简单
回答by Pawel Wilga
It's very important for accessibility reasons that you always specify value of the submit even if you are hiding this text, or if you use <input type="image" .../>to always specify alt=""attribute for this input field.
出于可访问性的原因，即使您隐藏此文本，也始终指定提交的值，或者如果您<input type="image" .../>总是alt=""为此输入字段指定属性，这一点非常重要。
Blind people don't know what button will do if it doesn't contain meaningful alt=""or value="".
盲人不知道如果按钮不包含有意义的alt=""或value="".
回答by phndiaye
You have to remove the borders and add a background image on the input.
您必须删除边框并在输入上添加背景图像。
.imgClass {
background-image: url(path to image) no-repeat;
width: 186px;
height: 53px;
border: none;
}
It should be good now, normally.
现在应该好了，正常。
