CSS Sprites(精灵图)

CSS Sprites技術は、画像を単一のファイルに統合することで、画像リソースに対するHTTPリクエストの数を減らす方法です。

スプライト図とは何ですか

サブスクリプトは、定義されたXおよびY座標の下で小さな画像を大画像に組み合わせる二次元画像です。

組み合わせ画像の中の単一の画像を表示するには、CSSを使用して background-position属性は、表示する画像の正確な位置を定義します。

CSS Image Spriteの利点

多くの画像、特に多くの小さな画像（例えばアイコン、ボタンなど）を持つページは、長い時間を要して読み込まれ、複数のサーバー請求が生成されることがあります。

画像スプライトを使用するのではなく、単独の画像を使用すると、ブラウザがサーバーに送信するHTTPリクエストの数を大幅に減らすことができます。これは、ページの読み込み時間を短縮し、サイトの全体のパフォーマンスを非常に効果的に向上させます。

以下の例を確認すると、明らかな違いが見られます。初めてマウスカーソルを非Spriteバージョンのブラウザアイコンに合わせた場合、しばらくしてホバーアイコンが表示されます。これは、ホバーアイコンがマウスがホバーしているときにサーバーからロードされるため、通常の画像とホバーアイコンが異なる画像であるためです。

Spriteバージョンでは、すべての画像が一枚の画像に統合されているため、マウスオーバー時に即座にホバー画像が表示され、滑らかなホバー効果が生まれます。CSS Spriteを使用すると、ユーザーは合成画像にアクセスし、HTTPリクエストの回数を減らし、ファイルの合計サイズも縮小し、アクセス効率を向上させることができます。

エンブレム画像を

を通じて、10枚の独立した画像を一枚の画像（mySprite.png）を使用してこのsprite画像を作成します。好きな画像エディタを使用して、自分自身のエンブレムを作成できます。

画像エンブレムからアイコンを表示

最後に、CSSを使用して必要な画像エンブレムの一部のみを表示できます。

まず、.spriteを生成し、エンブレム画像をロードするクラスを作成します。これは、すべてのアイテムが同じ背景画像を共有しているため、重複を避けるために行います。

.sprite　{
　　　　background:　url("images/mySprite.png")　no-repeat;
}

今、表示する各アイテムに対してクラスを定義する必要があります。例えば、Internet Explorerアイコンの形式を表示するには、画像エンブレムはCSSコードになります。

.ie　{
　　　　width:　50px;　/*　Icon　width　*/
　　　　height:　50px;　/*　Icon　height　*/
　　　　display:　inline-block;　/*　Display　icon　as　inline　block　*/
　　　　background-position: 0　-200px;　/*　Icon　background　position　in　sprite　*/
}

問題が発生しました。これらのピクセル値をどうやって取得しますか？background-position？答えを見つけましょう。最初の値は背景の水平位置、次に背景の垂直位置に位置しているためです。なぜなら、Internet Explorerアイコンの左上隅が左边缘に触れているため、起点からの水平距離（すなわち画像エンブレムの左上隅）は0また、それが第5個位置です。したがって、画像エンブレムの位置から起点への垂直距離は4 X 50px = 200pxで、なぜなら、各アイコンの高さは50px。

Internet Explorerアイコンを表示するには、その左上隅を起点、すなわち画像エンブレム（mySprite.png）の左上隅に移動する必要があります。また、このアイコンの垂直距離は200pxしたがって、全体の背景画像（mySprite.png）を垂直に上に移動する必要があります。200pxこれにより、値を負数として適用する必要があります。-200px負の値は垂直に上に動くことを意味し、正の値は下に動くことを意味しますが、それに水平方向の偏移は必要ありません。なぜなら、Internet Explorerアイコンの左上隅にはピクセルが無いからです。

使用CSS Image Sprite创建导航菜单

在上一节中，我们学习了如何显示图像精灵中的单个图标。这是使用图像精灵的最简单方法，现在我们将通过构建一个具有翻转效果的导航菜单向前迈出一步。

在这里，我们将使用相同的精灵图像（mySprite.png）创建导航菜单。

导航基础HTML

我们将从创建带有HTML 无序列表的导航菜单开始。

<ul　class="menu">
　　　　<li　class="firefox"><a　href="#">Firefox</a></li>
　　　　<li　class="chrome"><a　href="#">Chrome</a></li>
　　　　<li　class="ie"><a　href="#">Explorer</a></li>
　　　　<li　class="opera"><a　href="#">Opera</a></li>
　　　　<li　class="safari"><a　href="#">Safari</a></li>
</ul>

在导航上应用CSS

以下各节将介绍如何使用CSS将上面示例中给出的简单无序列表转换为基于恶意图像的导航。

手順1：重置列表结构

默认情况下，HTML 无序列表显示为项目符号。我们需要通过将list-style-type属性设置为来删除默认的项目符号none。

ul.menu　{
　　　　list-style-type:　none;
}
ul.menu　li　{
　　　　padding:　5px;
　　　　font-size:　16px;
　　　　font-family:　"Trebuchet　MS",　Arial,　sans-serif;
}

手順2：为每个链接设置通用属性

在这一步中，我们将设置所有链接都将共享的所有公共CSS属性。如：color，background-image，display，padding等。

ul.menu　li　a　{
　　　　height:　50px;
　　　　line-height:　50px;
　　　　display:　inline-block;
　　　　padding-left:　60px;　/*　To　sift　text　off　the　background-image　*/
　　　　color:　#3E789F;
　　　　background:　url("images/mySprite.png")　no-repeat;　/*　As all link share the same background-image　*/
}

手順3：各リンクのデフォルト状態を設定する

今や、各メニュー項目にクラスを定義する必要があります。なぜなら、画像エンブレム内の各項目は異なるbackground-position。例えば、Firefoxアイコンは画像エンブレムの起点、すなわち左上隅に位置しているため、背景画像を移動する必要はありません。したがって、この場合、背景の垂直位置と水平位置はすべて0です。同様に、画像エンブレム内の他のアイコンにも背景位置を定義できます。

ul.menu　li.firefox　a　{
　　　　background-position: 0 0;
}
ul.menu　li.chrome　a　{
　　　　background-position: 0　-100px;
}
ul.menu　li.ie　a　{
　　　　background-position: 0　-200px;
}
ul.menu　li.safari　a　{
　　　　background-position: 0　-300px;
}
ul.menu　li.opera　a　{
　　　　background-position: 0　-400px;
}

手順4：リンクのホバー状態を追加する

ホバー状態を追加する方法は、上記のリンクと同じ原理です。ただし、左上隅を画像エンブレムの起点（すなわち、左上隅）に移動させるだけで、私たちが上で行ったように。background-position以下の公式で簡単に計算できます：

ホバー状態の垂直位置 = ノーマル状態の垂直位置 - 50px

マウスのホバー画像がデフォルト状態の下にあるため、各アイコンの高さはすべて50px。アイコンのホバー状態も水平に偏移する必要はありません、なぜならアイコンの左上にピクセルがありませんから。

ul.menu　li.firefox　a:hover　{
　　　　background-position: 0　-50px;
}
ul.menu　li.chrome　a:hover　{
　　　　background-position: 0　-150px;
}
ul.menu　li.ie　a:hover　{
　　　　background-position: 0　-250px;
}
ul.menu　li.safari　a:hover　{
　　　　background-position: 0　-350px;
}
ul.menu　li.opera　a:hover　{
　　　　background-position: 0　-450px;
}

作業が完了しました！全体のプロセスを結びつけた後、これは私たちの最終的なHTMLとCSSコードです：