html - 画像を送信ボタンとして使用する

Question

ログイン ページの送信ボタンを灰色のボタンではなく画像にしたいと考えています。これを行うためにcssを使用すると、画像の上にボタンが表示されます。使い方はありますか

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

ボタンのサイズを特定のサイズに変更できれば、css を使用して好きな場所に配置できるため、同様に機能します。

ありがとう！

Answer 1

<input>ボタンをタグに置き換えることは、プログレッシブ エンハンスメント<img>の原則に違反するため、お勧めできません。ブラウザで許可されている場合は機能を拡張しながら、Web サイトを可能な限りアクセシブルな状態に保つ必要があります。

あなたの場合、クラシック<input type=submit>ボタンを画像に変換 する純粋な CSS ソリューションがあります。

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

もちろん、セマンティック セレクターを使用する必要があります。

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