提交按钮图像

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

什么节目up

enter image description here

它应该显示

enter image description here

来源

2012-08-02 Harsha M V

在''中删除'text-indent'并添加'value ='订阅''或在图像上添加字母'Subscribe' – asprin 2012-08-02 06:56:18

@Harsha M V：请参阅下面的答案。 – 2012-08-02 07:06:52

编辑：

我认为你正在尝试做的是在这个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" />

来源

2012-08-02 07:05:40

谢谢.... :) – 2012-08-02 09:35:31

不客气 – 2012-08-02 09:42:47

与sprites我通常远离背景'速记，以尽量减少重复。在其他州使用'.imgClass'和'background-position'上的'background-image' – 2013-01-17 16:24:47

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

UPDATE：

对于按钮状态，你可以使用类型= “提交”，然后添加一个类它

<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-02 06:44:34 asprin

正在添加名称=提交密钥？ – 2012-08-02 06:46:00

没有关键是添加类型=“图像” – Ibu 2012-08-02 06:47:49

如果我想添加按钮状态？ – 2012-08-02 06:48:48

你要删除边框和输入添加背景图片。

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

现在应该是好的，通常情况下。

来源

2012-08-02 09:34:05 phndiaye

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

来源

2013-03-16 03:57:19 Ibnu

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

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

来源

2013-03-19 12:25:15

提交按钮图像

回答

相关问题