使用图片作为提交按钮答案

【问题标题】：Use picture as submit button使用图片作为提交按钮
【发布时间】：2013-04-27 18:55:49
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

标签： html css ruby-on-rails haml

【解决方案1】：

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

【讨论】：

这很好用，但是有没有办法改变它的尺寸？它仍然会创建一个“按钮大小”的按钮，其背景是我要使用的图像。
@Blackdragon1400 - 将width="x" height="x" 属性添加到标签，使其与您的图像大小相匹配。我认为你可以这样做image_submit_tag(source, :size => "{width}x{height}")。
您上面的代码应该可以工作，但是图像仍然没有被重新调整大小......它在 Rails 服务器上运行，所以它在语法上是正确的，我检查了它，所以我不确定是什么问题正是如此。
我真的不知道rails，我唯一能想到的就是一些覆盖你提供的宽度和高度的css。尝试在标签中添加 id 并在 css 中显式添加大小。
是的，我实际上已经尝试了两种方法，只有 css 和背景图像，它把它放在它需要去的地方并且是正确的大小，但是我不能让它成为一个按钮，因为它不起作用带导轨。仅使用haml代码就可以制作按钮和图像，但尺寸错误=（

【解决方案2】：

你试过了吗：

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

【讨论】：

【解决方案3】：

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

在您的情况下，有一个纯 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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：