CSS画像モザイク技術

スプリットイメージ

画像を平らにすることは、個々の画像のコレクションです。

ロードして複数のサーバー要求を生成するのに長い時間がかかることがありますページ内に多くの画像があります。

リクエストの数を削減し、帯域幅を節約する画像サーバ分割を使用してください。

スプリットイメージ - 簡単な例

代わりに、私たちは、この単一の画像（「img_navsprites.gif "）を使用したように、3つの別々の画像を使用します：

CSSで、我々は我々が必要とする画像の一部のみを表示することができます。

以下の例では、画像「img_navsprites.gif」指定されたCSSの一部を示しています。

分析の例：

• <IMGクラス= "ホーム" SRC = "img_trans.gifは" /> - 彼らは空にすることはできませんので、src属性は、わずかな透明画像を定義します。 表示された画像は、我々はCSSの背景画像に指定されます
• 幅：46px;高さ：44px; - 我々が使用する画像の定義された部分
• 背景：のURL（img_navsprites.gif）0 0; - カスタムの背景画像とその位置（左0PX、トップ0PX）

これは、画像の最も簡単な方法を分割し、そして今、我々はリンクを使用し、効果をホバーを使用して行われます。

画像をフラット化 - ナビゲーションリストを作成します

私たちは、ナビゲーションリストを作成するには、分割画像（「img_navsprites.gif "）を使用します。

我々は、それが結合することができるので、HTMLのリストを使用し、また、背景画像をサポートしています。

分析の例：

• #navlist {位置：相対;} - 位置が相対的な位置を設定され、内部の絶対配置を可能にします
• #navlist李{マージン：0;パディング：0;のlist-style：なし;位置：絶対;トップ：0;} - マージンとパディングが0に設定され、リストスタイルが削除され、すべてのリスト項目は、絶対位置であります
• #navlist李、#navlist {高さ：44px;表示：ブロック;} - すべての画像の高さは44pxです

今、それぞれの特定の部分の位置とスタイル：

• #home {左：0PX;幅：46px;} - 左に配置され、方法は、画像の幅は46pxです
• #home {背景：のURL（img_navsprites.gif）0 0;} - カスタムの背景画像とその位置（左0PX、トップ0PX）
• #prev {左：63px;幅：43px;} - 右位置決め63px（#home幅46px +アイテムの間にいくつかの余分なスペース）、43pxの幅に。
• #prev {背景：のURL（ 'img_navsprites.gif'）-47px 0;} - 右47pxのカスタム背景画像（#homeディバイダー幅46px + 1ピクセル）
• {左：129px;幅：43px;} #next - 右位置決め129pxに（#prevの63px + #prev幅は43px +残りの容量である）、幅が43pxです。
• #next {背景：のURL（ 'img_navsprites.gif'）無リピート-91px 0;} - 右91pxのカスタム背景画像（#home 46px + 1ピクセルの境界線+＃prevを幅43px + 1ピクセル分周器）

ホバー効果 - 画像のを平ら

今、私たちは、ナビゲーションリストはホバー効果を追加したいです。

	：要素表示の上にホバーのための効果ホバーセレクター 先端::ホバー選択は、すべての要素に適用することができます。

当社の新しいイメージ（「img_navsprites_hover.gif」）は、3つのナビゲーション画像と3の画像が含まれています。

これは、単一の画像であるため、ユーザが画像上に留まっの代わりに、6つの別々の画像ファイルがロードを遅らせることはありません。

私たちは、ホバー効果はコードの唯一の3行を追加します追加します。

分析の例：

• ホバー擬似クラス：リスト項目がリンクを含んでいるので、我々が使用することができます
• すべての3つのホバー・イメージのために我々は同じ背景位置を指定したが、その後ダウン45pxそれぞれ - ;：{透明のURL（img_navsprites_hover.gif）0 -45px背景}ホバー：#home