اسپری تصاویر CSS

画像スプライト

画像スプライトは、単一の画像に含まれる画像集合です。

多くの画像を含むウェブページは、長い時間を要してロードし、多くのサーバーへのリクエストを生成します。

画像スプライトを使用することで、サーバーへのリクエストの数を減らし、帯域幅を節約できます。

画像スプライト - 簡単な例

我々は以下の単一の画像（"navsprites.gif"）を使用し、3つの単独の画像を使用することなくナビゲーションリストを作成します：

تصویر راهنمایی

CSSを使用することで、必要な画像の部分のみを表示することができます。

以下の例では、CSSが"navsprites.gif"画像のどの部分を表示するかを指定しています：

مثال

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

آزمایش کنید

توضیح مثال:

  • <img id="home" src="trans.gif"> - 小さな透明画像のみを定義します、なぜなら src 属性は空にすることができません。実際に表示される画像は CSS で指定された背景画像になります。
  • width: 46px; height: 44px; - 使用する画像部分を定義します
  • background: url(navsprites.gif) 0 0; - 背景画像とその位置（left 0px, top 0px）を定義します

画像スプライト - ナビゲーションリストの作成

我々はスプライト画像（"navsprites.gif"）を使用してナビゲーションリストを作成したいです。

我々は HTML リストを使用します，なぜなら、それはリンクであり、同時に背景画像をサポートするからです：

مثال

#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

آزمایش کنید

توضیح مثال:

  • #navlist {position:relative;} - 位置设置为相对，以允許在其中進行絕對定位
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin و padding به 0 تنظیم می‌شود، list-style حذف می‌شود و همه عناصر لیست به قرارگیری مطلق تبدیل می‌شوند
  • #navlist li, #navlist a {height:44px;display:block;} - height of all images is 44px

حالا شروع به تنظیم موقعیت و استایل برای هر بخش خاص می‌کنیم:

  • #home {left:0px;width:46px;} - قرارگیری به سمت چپ به طور مداوم، width of image 46px
  • #home {background:url(navsprites.gif) 0 0;} - تعریف تصویر پس‌زمینه و موقعیت آن (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - قرارگیری به سمت راست 63px (#home width 46px + some extra space between items), width 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - تعریف تصویر پس‌زمینه به سمت راست 47px (#home width 46px + 1px separator)
  • #next {left:129px;width:43px;} - قرارگیری به سمت راست 129px (#prev start is 63px + width of #prev is 43px + extra space), width 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - تعریف تصویر پس‌زمینه به سمت راست 91px (#home width 46px + 1px separator + #prev width 43px + 1px separator)

Image Sprite - Effect of Hover

حالا، ما می‌خواهیم اثر نمايشگر را به لیست هدایت‌کننده اضافه کنیم.

توضیح::hover selector قابل استفاده برای همه عناصر است و نه تنها محدود به لینک‌ها.

تصویر جدید ما ("navsprites_hover.gif") شامل سه تصویر هدایت‌کننده و سه تصویر برای اثر نمايشگر است:

تصویر راهنمایی

چون این یک تصویر است و نه شش فایل جداگانه، بنابراین وقتی کاربر موس را بر روی تصویر قرار می‌دهد،هیچ تأخیر بارگذاری وجود ندارد。

ما تنها سه خط کد اضافه می‌کنیم تا اثر نمايشگر (hover) را ایجاد کنیم:

مثال

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

آزمایش کنید

توضیح مثال:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - ما برای سه تصویر هنگام قرارگیری موس در حالت hover از یک موقعیت پس‌زمینه مشترک استفاده می‌کنیم، فقط 45 پیکسل به پایین