入力が

のスプライトイメージを使用する各イメージが約300ピクセルの入力テキスト/テキストエリアの背景として16 x 16のスプライトを使用できるかどうかは疑問です。誰もが方法を知っている、または私は別の背景にそれらをスライスする必要があります。入力が

出典

2011-06-21 Jacinto

背景が繰り返し表示されていますか？どの方向に？イメージ/例を投稿できますか？ – Tomas

ニーズがDiagonal CSS Spritesの優れた候補かもしれません。

Diagonal CSS Sprite in Action

アイデアは、あなたが現れてスプライトの他のグラフィックを恐れることなく変数または大きいサイズの文脈において背景画像としてスプライトを使用できることです。

なぜ対角スプライトですか？

スプライトが斜めに構築されているため、表示しているコンポーネントの下または右にコンポーネントがありません。これにより、スプライトを使用する要素は、次のコンポーネントを公開する心配がなくても必要な幅または高さにすることができます。

これは当然、余分な空白があるためスプライトファイルサイズが大きくなりますが、柔軟性は通常ファイルサイズのトレードオフの価値があります。

出典

2011-06-21 20:15:39 rjb

画像を左上のどこにでも配置したい場合は、この機能はありますか？ – Jacques

まあ、各スプライトをスプライトシートに300pxだけ置くことができます。したがって、一度に1つしかボックスに表示されません。

セット：

background-repeat: no-repeat;

とTextBox2をのために行います。

background-position: -300px 0;

か何かを。

出典

2011-06-21 19:52:54 adc

これは機能しません。あなたが十分に広い要素で終わると、それはあなたに次のイメージを示すことに終わります。 – Jacques

あなたは、このような方法をしようとするかもしれません：

LiveChat's sprite

出典

2011-06-21 20:00:09 pawlik

ここに挿入したスプライトのように見えるスプライトが多いようですが、スプライトの他の部分が表示されていない状態でインプットコントロールでそのスプライトを使用する方法が問題です。 Pseudoは入力コントロールのオプションではありません。 – Jacques

非常に簡単です - 入力には青いグラデーションの背景（最下部にあるもの）が必要です。あなたはバックグラウンドを 'url（sprite.png）repeat-x 0 -225px'（225pxは青のグラデーションが始まる高さ）に設定する必要があります。そうすれば、水平方向にグラデーションを繰り返すことができ、他の要素は表示されません。 – pawlik

はい、確かにスプライトをinputで使用することは可能ですが、ブラウザの互換性を気にしている場合は、それを強くお勧めします。たとえば、Internet Explorer 7のinput要素の背景画像は、固定位置にとどまっていないので、入力すると背景画像が移動します。水平スプライトを使用している場合は、特に問題があります。背景があるコンテナ要素にinputを置くことをお勧めします。そしてその目的のために、フォーム要素の間隔/高さ/マージン/パディングとブラウザとデバイスの不一致のために、各イメージの周囲に余分な余地があることを確認してください。リセットされたCSSスタイルシートを使用すると、最初は役に立ちます。そしてもう一度テストしてテストしてください！

出典

2011-06-21 22:27:31

答えて

関連する問題