23

ボタンにする必要がある美しい小さなCSS画像があります。私は約20の異なる方法を試しましたが、どれもうまくいきません。私は空白の何もないか、何も入っていない境界線を取得します。

HTML: http://lrroberts0122.github.com/DWS/lab6/level-2/

画像: http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png

CSS: http://lrroberts0122.github.com/DWS/lab6/level-2/css/main.css

特定の理由で「送信」に変更できないため、これを CSS で機能させる方法を理解する必要があります。ご協力ありがとうございました！

4

6 に答える 6

46

ドキュメントにあるように、画像送信ボタンを使用します。

<input type="image">画像を送信ボタンとして定義します

<input type=image src=button.png alt="Submit feedback">

(オンライン フォームを設定するときに、snailmail を連想させる画像は使用しませんが、そのような関連付けを作成する何らかの理由があるのか​​もしれません。)

于 2012-10-13T19:01:22.170 に答える
33 
input[type=submit] {
    background: url(http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png);
    border: 0;
    display: block;
    height: _the_image_height;
    width: _the_image_width;
}
于 2012-10-13T18:49:56.840 に答える
1

ブラウザによってボタンに指定されたスタイルを上書きできます。

たとえば、これをcssに追加すると、（Chromeで）私にとってトリックになります。

.controls input {
   background: url(' http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png') -411px -540px no-repeat;
   width: 199px;
   height: 109px;
   border: none;
}

ただし、実際には、ボタンにブラウザのcssを使用しない場合は、おそらくまったく使用<input type='submit'>しないでください。画像を挿入し（<img src="" />タグまたは<div>画像を背景として）、クリックリスナーをアタッチします。

例えば：

html：

<div class="controls">
    <img src="/yourimage.png" />
</div>

javascript（jQueryを使用していると仮定）：

$('.controls img').click(function(){... stuff to do...});
于 2012-10-13T19:14:28.293 に答える
1

HTML : 

<lable>From css class</lable><input class="input" onclick="alert('clicked')" type="button" value="" /><br/>
<lable>From HTML tag</lable>
<input type="button" style="background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);" onclick="alert('clicked')"/>

CSS :

.btn{
    display: inline-block;
 background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);
    position: relative;
    border-radius: 5px;
}
.input{
    background: transparent;
    color: #fff;
    border: 0;
    padding-right: 20px;
    cursor: pointer;
    position: relative;
    padding: 5px 20px 5px 5px;
    z-index: 1;
}

JS フィドル: http://jsfiddle.net/AJNnZ/26/

于 2013-11-25T12:08:46.657 に答える
-1

ちょっとハックな別の方法はこれです（jQueryを使用）：

<div onclick="$(this).parent('form').submit();"></div>

その後、div好きなようにスタイリングします。

于 2013-12-03T12:26:14.700 に答える