CSSスプライトの使い方は？

CSS スプライトは、中国では css スプライトと呼ばれていることが多く、Web 画像アプリケーションの処理方法です。ページ内に散在するすべての画像を 1 つの大きな画像に含めることができるため、ページにアクセスしたときに、読み込まれた画像が以前のように 1 つずつ表示されることがなくなります。

#CSS の使用方法

CSS スプライトは実際に、Web ページ上のいくつかの背景画像を 1 つの画像ファイルに統合します。次に、CSS の「background-image」、「background-repeat」、および「background-position」の組み合わせを使用して、背景を配置します。background-position では、数値を使用して背景画像の位置を正確に配置できます。

Webページへのアクセスでは、クライアントは画像にアクセスするたびにサーバーにリクエストを送信するため、アクセスする画像が増えるとリクエストも多くなり、遅延が発生する可能性が高くなります。 . .

したがって、CSS Sprites技術を加速する鍵は、品質を落とすことではなく、その数を減らすことですが、当然ながら、それに伴うメモリ消費量の増加や、CSS Sprites画像の合成の煩雑さなどの欠点は改善されません。ウェブサイトのパフォーマンスだけでは十分ではありません。

css スプライト 適用範囲:

1、http リクエストの数を減らして Web ページを高速化する必要があります。

2. Web ページには多数の小さなアイコンが含まれています。また、いくつかのアイコンは非常に多用途です。

3. Web ページに事前にロードする必要がある画像があります。主に、a と a:hover 背景画像の関係です。 a と a:hover の背景画像が別々にロードされている場合、ユーザーのマウスがボタン上に移動すると、ボタンの背景が突然消えてから元に戻り、「ちらつき」が発生します。ボタンのテキストの色が同じまたは類似している場合さらに恥ずかしいのは、ボタンが「消えた」と人々に錯覚させる可能性があることです。

満たす必要のある条件

Web デザインでは、このテクノロジーを使用して組み立てられる画像のルールに従うことが最善です。幅または高さを固定。幅と高さが固定できればベストです。タイル化する必要がある画像は明らかにスプライトには適していません。

上の図のボタンは、幅と高さが固定されています。

幅が固定されている場合、いくつかの小さな画像を並列に配置できます。高さを固定すると小さい絵が縦に並びます。

背景が広くも高くもなく、CSSスプライト技術を強制的に使用すると、「ページ上に表示すべきではない画像」という状態が生まれやすくなります。 「無理に高さを設定」してしまうと、今後のメンテナンスにも非常に悪影響を及ぼします。

以上がCSSスプライトの使い方は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。