5

CSSスプライトを使用して、繰り返し画像と非繰り返し画像に1つの画像のみを使用する方法があるかどうか疑問に思っていました。したがって、この場合、幅と高さに関係なく、ページ上のすべての画像を結合したいと考えています。標準は、すべての非繰り返し画像を使用して 1 つの画像を作成し、すべての繰り返し画像を使用して別の画像を作成することです。しかし、すべてに1つの画像を使用できるかどうかを知りたかっただけです.

ありがとう。

4

4 に答える 4

16

簡単な答えは「いいえ」です。

説明は、繰り返し画像は、どの方向に繰り返しても全体が表示されるということです。したがって、に設定された背景は、repeat-xすべての画像コンテンツを水平方向に表示します。これが、スプライトを使用して両方向に同時に繰り返すことができない理由です。

于 2010-07-28T19:00:38.347 に答える
2

標準では、すべての非繰り返し画像を使用して1つの画像を作成し、すべての繰り返し画像を使用して別の画像を作成することを知っています。

私はあなたが間違っていると思います。画像のセグメントを選択的に並べて表示することはできません。画像全体のみを並べて表示できます。したがって、すべての繰り返し画像は、独自の画像ファイルに存在する必要があります。

于 2010-07-28T19:05:43.513 に答える
2

@Ryan Kinal は、スプライト画像を背景画像の繰り返し (両方向) に使用できないと彼の答えで言ったとき、正しいです。

1 つまたは 2 つのファイル (画像ではない) のみを使用してクロスブラウザーで実行する方法はまだありますが、それほど単純ではなく、変更が複雑になるはずです (ただし、スプライトも変更が複雑ですが、少なくとも視覚的です! ）。

PHPIED の記事で述べたように、インライン画像は 2 回繰り返されますが、3 つの条件付きコメントの助けを借りて、MHTML ファイルで IE7 以下、データ: base 64 ファイルで IE8 以上、同じデータ ファイルで !IE を狙うことができます。 .

サーバー上に 5 つの異なるファイルがあり、特定のブラウザーによって 4 つのファイルがダウンロードされます。

  • no-repeat-ing スプライトを含む画像
  • repeat-x-ing スプライトを含む画像
  • repeat-y-ing スプライトを含む画像
  • MHTML 用のファイル (IE7 以下に提供する必要があります) background-images
  • 同じ繰り返しの背景画像のファイルですが、データは IE8+ および !IE ブラウザ用にエンコードされています

ファイルサイズが大幅に増加する可能性があるため、大きな繰り返し画像はエンコードしないでください。デザインは異なる場合があります。

于 2010-07-28T20:09:45.747 に答える
0

残念ながら、両方の種類の画像を同じスプライトで動作させることはできません。通常、繰り返し画像は大きな画像 (グラデーション) の一部であり、読み込み時間とサイズを節約するために繰り返すことができます。画像を水平方向、垂直方向、およびその両方で繰り返すことができます。
repeat-x、repeat-yまたはrepeat両方の場合。スプライトで繰り返されない画像の場合は、スクロール座標を指定する必要がありますscroll 60px -20px(60px は左座標、-20px は上座標)。

于 2010-07-28T20:47:54.233 に答える