1

送信ボタンにcssspritesを使用したい理由は2つあります。

  • 動的にボタンを作成しましたが、将来的にはローカライズされる可能性があります
  • ページに5つのボタンがある場合でも、HTTPリクエストを1つだけにしたい

問題は、ボタンのJavaScriptを避けたいのでinput、タイプのフィールドを使用する必要があることimageです。他のcssspriteの場合と同じように、このフィールドに背景画像を設定できます。

問題は、画像ソースを空のピクセルに設定する必要があることに気付いたということです。そうしないと、壊れた画像アイコンが表示されます。

そうは言っても、これは私が思いついた最良の解決策です：

<style>
    .csssprite_cat {
        background-image:url(http://www.mrfreefree.com/images/speciali/211/funny_cat_50.jpg); width: 50px;
        height: 50px;
    }
</style>

<input type=image src="http://www.grasse-ac.com/gif/no_pixel.gif" class="csssprite_cat">
<input type=image class="csssprite_cat">

（このファイルをブラウザに直接ロードすることができます-私はランダムなサイトから画像を借りています）。

ある程度は問題なく動作しますが、古き良き友人のpixel.gifを使用する必要があります。とても懐かしい！

壊れた画像のテキストとアイコンを非表示にする方法がcssにない限り、javascriptなしでより良い方法はおそらくありません。

4

2 に答える 2

4

画像入力タイプは使用しないでください。標準の送信ボタンを使用して、そのようにスタイルを設定することをお勧めします。

を定義したら、使用するボタンごとbackground-imageに一意を定義する必要があります。background-positions

下位互換性のために、次のようにクラス混合を使用することをお勧めします（現在、IEはまだCSS3属性セレクターをサポートしていないため）。

<input type="submit" class="submit uniqueButtonClass" value="Submit" />

.submitクラスにプロパティを指定すると、個々のボタンごとに個別background-imageにプロパティを設定でき、何度も繰り返す必要がなくなります。background-position

例：

.submit { background-image: url(path/to/image.png); width: 50px; height: 25px; border: 0; }
/* assuming 25px is the offset you're using */
.uniqueButtonClass { background-position: 0 25px; }
于 2009-07-16T20:22:38.073 に答える
1

上記の入力タイプを使用するか、次のいずれかを使用することもできます。

<button><img src="http://www.mrfreefree.com/images/speciali/211/funny_cat_50.jpg" /></button>

ボタンタグを使用すると、ほとんど何でも投げることができ、フォーマットをより細かく制御できます。

この場合、ボタンまたはボタン自体の内側にスパンをスタイリングできます。

于 2009-07-16T21:36:23.993 に答える