css スプライト实例_html/css_WEB-ITnose

css スプライトは文字通り CSS スプライトと訳されます。通常は「CSS 画像のステッチ」または「CSS テクスチャの配置」として解釈されます。この記事では、CSS スプライトの使い方と基本的な使用例を紹介します。必要なプログラマーは参考にしてください。

1. CSS スプライトとは

css スプライトは、直訳すると CSS スプライト となります。通常、「CSS 画像ステッチング」または「CSS テクスチャ配置」として解釈されます。実際には、複数の画像を 1 つの画像に統合し、CSS 背景配置テクノロジによって Web ページの背景をレイアウトします。これを行うことの利点も明らかです。画像が多いと http リクエストが増加するため、特に CSSSPrite を使用して画像の数を減らすことができれば、間違いなく Web サイトのパフォーマンスが低下します。画像の速度が向上します。

CSS スプライトとは何ですか? 一般的な説明: CSS スプライトは、実際には Web ページ上のいくつかの背景画像を 1 つの画像に統合し、CSS "background-image"、"background-repeat"、"background-" を使用します。 「position」の組み合わせにより、背景の配置を実行します。background-position では、数値を使用して、レイアウト ボックス オブジェクト内に背景画像を正確に配置できます。

2. 適切な CSS スプライト レイアウトと不適切な CSS スプライト レイアウト

1. 適したもの: 一般的な小さなアイコン素材

小さなアイコン ico 素材、一般的なアイコンは非常に小さく、幅と高さが 10 ピクセル以上、数十ピクセルです。スプライトの背景の位置とレイアウトを実現するために、これを 1 つの画像に結合します。小さな ico が多すぎると、Web ページをロードするときに当然ながら一部の http IIS リンクが消費されますが、それらはロード後すぐに解放されます。

2. 適さないもの: 大きな写真と大きな背景

大きな背景は通常、Web ページの背景に使用されます。結合すると、Web ページの背景として設定されたときにすべての背景が表示されます。大きな画像を結合したり結合したりすると、画像のサイズが大きくなります。訪問者がネットワーク帯域幅にアクセスできない場合、背景画像を含む大きなファイルの読み込みが若干遅くなります。そのため、大きな画像に対して CSS スプライトの背景配置レイアウトを使用することはお勧めできません。

3. 適したスプライトのおすすめまとめ

一般に、このスプライト結合レイアウトはローカルな小さなボックス レイアウトに使用され、大きな背景や大きなレイアウトの背景には適していません。たとえば、小さな部分レイアウト、小さなアイコンの背景、小さなナビゲーションの背景、その他の CSS レイアウトなどです。

3. CSS スプライトの判断と選択の長所と短所

1. スプライトの利点:

いくつかの小さなアイコンが 1 つの画像に結合されて配置され、http IIS リクエストの数が減少します。これは隠れた利点です。トラフィックの多い Web サイトの場合 明らかに、これにより Web サイトのパフォーマンスが暗黙的に向上します。トラフィックの多い Web サイトでは、HTTP リクエストの数は比較的貴重です。これが CSS スプライトの最大の利点であり、HTTP リクエストの数が減少する主な理由でもあります。画像ファイルの数。

2. スプライトの欠点

画像を結合するときは、複数の画像を順序正しく 1 つの画像に結合し、セクションに不要な背景が表示されないように十分なスペースを残す必要があります。または、継ぎ合わせの位置が不適切な場合、レイアウト中にボックスオブジェクトを配置するときに、隣接する写真が簡単にマージされ、写真が干渉しやすくなります。

CSS スプライトは開発中にさらに面倒で、Photoshop (PS) などを使用する必要があります。各背景ユニットの正確な位置を測定して計算するためのツールです。これは難しいことではありませんが、非常に面倒です。変更するには、通常、結合された画像を変更する必要があります。元の場所に配置できない場合は、変更する必要のない部分は変更しないことが最善です。 （できれば）以下の画像を追加します。画像のバイト数が増加します。画像が変更されるたびに、画像のコンテンツを削除または追加する必要があり、少し面倒で、画像の位置を再計算する必要があるためです（特にこのような数千ピクセルの画像）も非常に面倒です

画像の位置をある絶対値に固定する必要があるため、中心などの自由度が失われます。

3. 推奨事項の概要

画像の貼り合わせには一定の経験とスキルが必要であり (練習すればすぐに習得できます)、位置決めの値の測定や変更がそれほど柔軟ではないため、小規模な Web サイトやトラフィックの少ない場合にはあまりお勧めできません。 Web サイトや一般的な企業 Web サイトでは、CSS スプライトを使用します。CSS スプライトを使用すると、通常の単一の背景画像レイアウトよりも多くの時間とエネルギーを消費するため、小規模なサイトには推奨されません。ただし、柔軟なレイアウトを習得するには、このレイアウト スキルも習得する必要があります。多数の HTTP リクエストが存在する小規模なサイトをスプライシングしても何のメリットもありませんが、貴重な時間を無駄にします。逆に、大規模な Web サイトやトラフィックの多い Web サイトには、より価値のあるものをお勧めします。

4. CSS スプライトのサンプル チュートリアル

1. 実現するマテリアルとエフェクトのスクリーンショット

2. スプライトのサンプル チュートリアルの説明と紹介

まず、これらのアイコン素材を同じ絵（PSステッチ）上に配置し、リストごとに異なるアイコンを配置したリスト型レイアウトに実装します。このレイアウトを実装するには CSS スプライトを使用します (実際には背景スタイルを使用します)。

まず、このリスト レイアウトには ul li リスト レイアウトを使用します。これは、周囲のコンテンツと境界線の間に一定の間隔を空けるために、ul にパディングを設定するためです。各 li の前にある画像は異なりますが、背景画像は画像上で 1 つに結合されます。そこで、この異なるアイコン効果を実現するために、ここで li の spam タグを使用して、各アイコンを区別します。スパンに異なるクラスを設定し、異なるクラスに応じて対応するアイコンを設定および配置します。

3. チュートリアルの準備例

1) 初期化テンプレートの使用: 主要なブラウザと互換性を持たせるために、ここでは引き続き Web サイトを使用して初期化テンプレートを提供し、このテンプレートに基づいて設定を変更します。この例のスタイル。
2) アイコン素材。ここでは、以下に示すように、「ico.png」という名前の結合されたアイコン素材画像を直接提供します。直接保存して使用できます。

4. まずエフェクトをレイアウトし、CSS スプライトで異なる背景アイコン スタイルを設定します

html コード:

<ul class="Sprites">     <li><span class="a1"></span><a href="#">WORD文章标题</a></li>     <li><span class="a2"></span><a href="#">PPT内容标题</a></li>     <li><span class="a3"></span><a href="#">Excel内容标题</a></li>     <li><span class="a4"></span><a href="#">PDF内容标题</a></li>     <li><span class="a5"></span><a href="#">文本文档标题</a></li> </ul> 

異なるエフェクトを区別するために、異なるクラスをスパンに追加します。

CSS コード:

ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;} ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden} ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;  overflow:hidden;background:url(ico.png) no-repeat} ul.Sprites li a{ padding-left:5px} 

エフェクトのスクリーンショット

CSS スプライト キー コードと説明

まず ul.Sprites li spa の背景を紹介します
ul.Sprites li spa{background:url(ico.png) no -repeat} は、span の CSS 背景画像を設定します。
次に、異なるスパンクラスのアイコンの背景位置の特定の値をそれぞれ設定します
ul.Sprites li span.a1{background-position: -62px -32px} 背景画像を対応するボックスオブジェクトの背景として設定し、「ドラッグ」 " 左に 62px、上に 32px ドラッグしてこの背景アイコンの表示を開始します
ul.Sprites li span.a2{background-position: -86px -32px} 背景画像を対応するボックス オブジェクトの背景として設定し、" 86px 左にドラッグし、上に 32px ドラッグすると、この背景アイコンの表示が開始されます
ul.Sprites li span.a3{background-position: -110px -32px} 背景画像を対応するボックス オブジェクトの背景として設定し、この背景アイコンの表示を開始するには、左に 110 ピクセル、上に 32 ピクセル「ドラッグ」します。
ul.Sprites li span.a4{background-position: -133px -32px} 背景画像を、対応するボックス オブジェクトの背景として設定しますそして、左に 133 ピクセル、上に 32 ピクセル「ドラッグ」して、この背景アイコンの表示を開始します
ul .Sprites li span.a5{background-position: -158px -32px} 背景画像を対応するボックス オブジェクトの背景として設定した後、この背景アイコンの表示を開始するには、左に 158 ピクセル、上に 32 ピクセル「ドラッグ」します

キー: 背景の背景位置には 2 つの値があります。最初の値は、左への距離の値を表します (正または負の値を指定できます)。 2 番目の値は、上部までの距離の値を表します (正または負の値を指定できます)。値は正または負の値になります。オブジェクトボックスの背景画像 背景画像を左に移動して距離を考慮すると、背景画像が表示され始めます。これが負の数の場合、背景画像をボックスの背景画像として表します。オブジェクト。背景画像がボックス オブジェクトの左側を超えてどのくらいドラッグされるか、および背景画像の表示が開始されるまでボックス オブジェクトの上部を超えてどのくらいドラッグされるか。

CSS スプライト技術の技術概要

CSS スプライトは、実際には CSS 背景スタイルを拡張したもので、以前は、background-position は通常、正の値に設定され、背景の左から上までのピクセル数が設定されていました。画像の表示を開始する背景がマイナスでした。値を設定した後、画像の表示を開始するには画像を左上から何ピクセル離す必要があります。この場合を観察して値を複数回変更してください。パターンを作成する場合は、すぐにこのテクニックを使用して、距離値を取得するための PS スライス ツールを学習します。