使用图片作为提交按钮

我想让我的提交按钮为我的登录页面是一个图片，而不是灰色的按钮。当我使用CSS来做到这一点，我得到了图片顶部的按钮。有没有办法使用使用图片作为提交按钮

= submit_tag image_tag('image/location.jpg) 'Login', :id => 'Login'

如果我能调整按钮到一定的尺寸，将工作，以及因为我可以把它放在我想利用CSS的方法。

谢谢！

来源

2013-04-27 Blackdragon1400

你试过：

.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 */ 
}

来源

2013-04-27 18:59:09

submit_tag生一个HTML input type='submit'。您需要一个html button，该轨道可以使用button_tag生成。

= button_tag :id => 'Login' do 
    image_tag('image/location.jpg')

来源

2013-04-27 19:02:29 Taavo

据我所知有一个<input type="image" src="..."/>将使图像作为一个提交按钮。我不知道Ruby on Rails，但快速搜索出现了image_submit_tag(source, options = {})。你可以看文档here。

来源

2013-04-27 19:07:12

这很好，但是有没有办法可以改变这个尺寸？它仍然会生成一个“按钮大小”按钮，并带有我想要使用的图像的背景。 – 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

与<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

当然，你应该使用一些语义选择。

来源

2013-04-27 19:14:17

使用图片作为提交按钮

回答

相关问题