1

我想让我的登录页面的提交按钮成为图片而不是灰色按钮。当我使用 css 执行此操作时，我得到了图片顶部的按钮。有没有办法使用

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

如果我可以将按钮调整到某个尺寸也可以，因为我可以使用 css 将它放置在我想要的位置。

谢谢！

4

4 回答 4

2

据我所知，有一个<input type="image" src="..."/>可以使图像充当提交按钮。我不知道 ruby​​ on rails，但快速搜索出现了image_submit_tag(source, options = {})。您可以在此处查看文档。

于 2013-04-27T19:07:12.217 回答
1

你有没有尝试过：

.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-27T18:59:09.167 回答
1

用标签替换<input>按钮<img>不是一个好主意，因为它违反了渐进增强的原则：您应该让您的网站尽可能易于访问，同时在浏览器允许的情况下增强其功能。

在您的情况下，有一个纯 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-27T19:14:17.893 回答
0

submit_tag 生成一个 html input type='submit'。您需要一个 html button，rails 可以使用button_tag生成它。

= button_tag :id => 'Login' do
  image_tag('image/location.jpg')
于 2013-04-27T19:02:29.627 回答