使用图片作为提交按钮
问题描述:
我想让我的提交按钮为我的登录页面是一个图片,而不是灰色的按钮。当我使用CSS来做到这一点,我得到了图片顶部的按钮。有没有办法使用使用图片作为提交按钮
= submit_tag image_tag('image/location.jpg) 'Login', :id => 'Login'
如果我能调整按钮到一定的尺寸,将工作,以及因为我可以把它放在我想利用CSS的方法。
谢谢!
答
你试过:
.element {
appearance: none;
-webkit-appearance: none;
background-image: url(path/img-png) no-repeat 0 0;
background-size: /* (desired size in pixels or %) */ 40px 50px;
-moz-background-size: /* (desired size in pixels or %) */ 40px 50px;
border: none;
outline: none;
/* any other desired rules */
}
答
submit_tag生一个HTML input type='submit'
。您需要一个html button
,该轨道可以使用button_tag生成。
= button_tag :id => 'Login' do
image_tag('image/location.jpg')
答
据我所知有一个<input type="image" src="..."/>
将使图像作为一个提交按钮。我不知道Ruby on Rails,但快速搜索出现了image_submit_tag(source, options = {})
。你可以看文档here。
答
与<img>
标签更换<input>
按钮是不是一个好主意,因为它违反了progressive enhancement原则:你应该让你的网站尽可能接近,而其enhansing时capabilites浏览器允许它。
在你的情况,有一个纯CSS溶液变成经典<input type=submit>
按钮为图像:
input {
/* sizing the button */
width: 10em;
height: 10em;
/* disabling the system look */
appearance: none;
-webkit-appearance: none;
/* resetting default browser styler */
border: 0;
margin: 0;
padding: 0;
/* hiding button label */
text-indent: -9999px;
/* applying the image */
background: url('http://i.imgur.com/1x8TMLt.jpg') no-repeat transparent;
background-size: 100% 100%; /* stretching */
/* letting users know it's clickable */
cursor: pointer;
}
当CSS是出于某种原因无法使用,按钮会显示为一个文本标签的按钮。当CSS可用时,按钮将显示为给定大小的图像,耶!
演示:http://jsbin.com/okasut/1/edit
当然,你应该使用一些语义选择。
这很好,但是有没有办法可以改变这个尺寸?它仍然会生成一个“按钮大小”按钮,并带有我想要使用的图像的背景。 – Blackdragon1400 2013-04-27 19:15:29
@ Blackdragon1400 - 为标签添加'width =“x”height =“x”'属性,使其与您的图片大小相匹配。我认为你可以像这样做'image_submit_tag(source,:size =>“{width} x {height}”)''。 – 2013-04-27 19:21:48
你的上面的代码应该可以工作,但是图像仍然没有被重新调整大小......它在rails服务器上运行,所以它的语法正确,我检查出来了,所以我不确定问题到底是什么。 – Blackdragon1400 2013-04-27 19:33:06