問題タブ [css-sprites]

私は自分の CSS でより禅になろうとしており、またサーバーの負荷を軽減しようとしています。背景画像とオフセット値を使用して、すべての小さなアイコン画像を 1 つの画像にダウンロードし、CSS を使用して適切な画像を表示できる手法を聞いたり見たりしたことがあります。ただし、これを正しく行う方法が少し混乱しています。具体的には、img.png という大きな画像に 48 ピクセルの 16x16 の画像がある場合、次のようなものが必要です。

(明らかにスタイルを CSS に取り出しますが、ここでは説明のためにインラインにしています。)

ただし、 img はオフセットを無視します。スパンのようなものを使用した場合、スパンの幅を設定する方法が正確にはわかりません（実際に試してみたところ、幅が無視されたようです）。

どんな助けでも大歓迎です。

スーパーマリオブラザーズの背景をパンするために呼び出している jQuery spritely プラグイン メソッドにパン ` 要素を実行しているため、ページの長さがかなり長くなるように見えます。

http://www.marioplanet.comにアクセスすると、3 つの異なるパン背景があることがわかります。2 つだけでは、ページのコンテンツの高さ全体を埋めるのに十分ではありませんが、3 つのパンでは、オーバーフローが多すぎて、ユーザーがページをスクロールダウンして、背景のパンを確認することができます。画像。

私がやりたいことは<div>、ページの最後の要素 (この場合は私の<div id="footer">要素) の高さで 3 番目のパンを切り取ることです。

どうすればこれを行うことができるかについてのアイデアはありますか? いつでも 2 つの背景を作成してコンテンツを押しつぶすことができると思いますが、それは面白くありません。:)

ありがとう！

私は通常、CSS スプライトの作成に問題はありませんが、これは私を困惑させました...そして、それを解決する方法がわかりません. 基本的に、次のようなナビゲーション スプライトがあります。

<li>次のようなタグでそれらをレイアウトする標準的な規則を使用しています。

次に、CSS を適用して背景の位置を調整します。

もちろん、私はこれを考えていませんでしたが、問題はホバーで発生します。「正方形」の領域しか定義できないため、要素にカーソルを合わせると、「青色」のホバー状態が次のナビゲーション アイテムに引き継がれます。

次に、アイテムごとに個別の画像を作成する必要があると考えました...しかし、矢印セクションが重なっているため、それもうまく機能しません。

たぶん、「中間」の矢印セパレーターを分離する必要がありますか？よくわかりません。

私はここで困惑しています。何か案は？

サイトの速度を最適化しようとしています。以前は丸みを帯びた角に画像を使用していましたが、今は border-radius および -moz-border-radius css ルールで変更しました。速度的にはどの方法が最適ですか? 以前は css ルールの方が速いと思っていましたが、css スプライトについて話しているサイトをたくさん見てきたので、今は少し混乱しています。ああ、私は IE の互換性を気にしないので、あなたが望む方法を提案することができます。

テキストフィールドに国の旗を表示したい。

すべてのアイコンが別々に保持されている場合は、正常に機能します。例えば：

ただし、60を超えるフラグがあると、多くのHTTPリクエストが発生する可能性があるため、それらを1つの垂直CSSスプライトイメージ（<25 KB）に配置しました。

問題は、CSSスプライトで同じ結果（一度に表示されるフラグは1つだけ）を取得できないことです。

スクリーンショット（正解と不正解）

それが不可能な場合、他にどのような解決策を提案しますか？フラグは、ユーザーが別の場所に入るたびに変更する必要があります。

CSS スプライト ベースの Apple をテーマにしたナビゲーション バーがあります。

http://www.marioplanet.com/index.asp

さて、なんらかの理由で、「ホーム」ボタンのホバー、押された、アクティブな状態に問題があるようです。何らかの理由で、静的に表示されます。

このファイル、http://www.marioplanet.com/css/nav.css

このコードは次のとおりです。

おそらく問題がある場所です。

Google の DevTools (基本的には FireBug) をいじって問題を切り分けようとしましたが、うまくいきません。

「ホーム」ボタンの状態のセレクターは正確に見えます。

ソース画像 ( http://marioplanet.com/images/globalnav/wanzart.png ) には実際の状態が含まれているため、これは問題ではありません..

PNG画像にAlphaImageLoaderを使用しようとしていますが、画像がスプライト画像です。CSSでAlphaImageLoaderを使用すると、スプライト画像の出力が得られません。スプライトにAlphaImageLoaderを使用するにはどうすればよいですか？スプライトに使用できますか？

私は非常に基本的なリンクを持っているスプライト画像を使用しようとしています

これを変更して、srcの代わりにスプライトで画像を使用するようにしようと、しばらく苦労しています

画像にスプライトを使用するかどうかの決定について誰かがコメントできますか？次の利点/トレードオフがあります（そのうちのいくつかは軽減できます）。

個々の画像上のスプライト

長所：

• 管理する画像が少ない
• テーマ画像の実装が簡単
• イメージスワップ（JS / CSS）はより速く発生します（追加のイメージロードを必要としないため）
• HTTPリクエストが少ないため、画像の読み込みが速くなります
• キャッシュする画像が少なくなります（ただし、KB全体に実質的な違いはありません）

短所：

• 管理するより多くのバックグラウンドポジション
• 画像のペイロードが過剰に膨らんでいる可能性があり（スプライトに未使用の画像が含まれている可能性があります）、ページの読み込みが遅くなる可能性があります
• 同期してダウンロードできないため、画像の読み込みが遅くなります

CSS スプライトの使用を検討していますが、ホイールを発明したくありません。jQuery または jQuery UI に既存のサポートはありますか? または、別の方法として、十分にデバッグされた jQuery プラグイン