Html 使用图片作为提交按钮

我想让我的提交按钮为我的登录页面是一个图片，而不是灰色按钮。当我使用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 */
}

您是否尝试过：

.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_标记生成一个html

输入类型='submit'

。您需要一个html

按钮，rails可以使用该按钮生成

submit_标记生成一个html
输入类型='submit'
。您需要一个html
按钮，rails可以使用该按钮生成

据我所知，有一个
可以使图像充当提交按钮。我不知道RubyonRails，但是快速搜索出现了
image\u submit\u标记（source，options={}）
。您可以查看文档。
据我所知，有一个
可以使图像充当提交按钮。我不知道RubyonRails，但是快速搜索出现了
image\u submit\u标记（source，options={}）
。您可以查看文档。
将
按钮替换为
标签不是一个好主意，因为这违反了以下原则：您应该尽可能保持网站的可访问性，同时在浏览器允许时增强其功能

在您的例子中，有一个纯CSS解决方案可以将经典的
按钮转换为图像：

当CSS因某种原因不可用时，按钮将显示为带有文本标签的按钮。当CSS可用时，按钮将显示为给定大小的图像，耶

演示：

当然，您应该使用一些语义选择器。
将
按钮替换为
标记不是一个好主意，因为这违反了以下原则：您应该尽可能保持网站的可访问性，同时在浏览器允许时增强其功能

在您的例子中，有一个纯CSS解决方案可以将经典的
按钮转换为图像：

当CSS因某种原因不可用时，按钮将显示为带有文本标签的按钮。当CSS可用时，按钮将显示为给定大小的图像，耶

演示：

当然，您应该使用一些语义选择器。
这非常有效，但是有没有办法更改它的维度？它仍然会生成一个“按钮大小”的按钮，带有我要使用的图像背景。@Blackdragon1400-将
width=“x”height=“x”
属性添加到标记中，使其与您的图像大小匹配。我想你可以这样做
image\u submit\u标记（源代码：size=>“{width}x{height}”）
。你上面的代码应该可以工作，但是图像仍然没有重新调整大小。。。它在rails服务器上运行，所以语法正确，我检查了它，所以我不确定问题到底是什么。我真的不知道rails，我唯一能想到的是一些css，它覆盖了您提供的宽度和高度。尝试向标签添加id，并在css中显式添加大小。是的，我实际上已经尝试了两种方法，仅使用css和背景图像，它将其放置在需要的位置，并且大小正确，但是我无法使其成为按钮，因为它无法与rails一起工作。仅使用haml代码，它就生成了按钮和图像，但大小不正确=（这很好用，但是有什么方法可以更改它的尺寸吗？它仍然生成一个“按钮大小”的按钮，带有我要使用的图像的背景。@Blackdragon1400-添加
width=“x”height=“x”
将属性设置为标记，使其与您的图像大小匹配。我认为您可以这样做
image\u submit\u标记（源代码：size=>“{width}x{height}”）
。您上面的代码应该可以工作，但图像仍然没有重新调整大小…它在rails服务器上运行，因此语法正确，我检查了它，所以我不确定问题到底出在哪里。我真的不知道rails，我唯一能想到的是一些css覆盖了您提供的宽度和高度。请尝试添加id to标记并在css中显式添加大小。是的，我实际上已经尝试了两种方法，仅使用css和背景图像，它将其放置在需要的位置，并且大小正确，但是我无法使其成为按钮，因为它与rails不兼容。仅使用haml代码，它会生成按钮和图像，但大小错误=(
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;
}