٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش CSS Image Sprites

Sprites تصویر Sprite تصویر مجموعه ای از تصاویر است که در یک تصویر واحد قرار می گیرد. بارگیری یک صفحه وب با تصاویر بسیار طولانی مدت طول می کشد و چندین درخواست سرور ایجاد می کند. استفاده از sprites تصویری…

محمد یوسفی

12 جولای 2021

Sprites تصویر

Sprite تصویر مجموعه ای از تصاویر است که در یک تصویر واحد قرار می گیرد.

بارگیری یک صفحه وب با تصاویر بسیار طولانی مدت طول می کشد و چندین درخواست سرور ایجاد می کند.

استفاده از sprites تصویری باعث کاهش تعداد درخواست های سرور و صرفه جویی در پهنای باند می شود.


Sprites تصویر – یک مثال ساده

به جای استفاده از سه تصویر جداگانه ، ما از این تصویر واحد استفاده می کنیم (“img_navsprites.gif”):

با CSS می توانیم فقط بخشی از تصویر مورد نیاز خود را نشان دهیم.

در مثال زیر CSS مشخص می کند که کدام قسمت از تصویر “img_navsprites.gif” نشان داده شود:

مثال

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

مثال توضیح داده شده:

  • <img id="home" src="img_trans.gif">– فقط یک تصویر شفاف کوچک را تعریف می کند زیرا ویژگی src نمی تواند خالی باشد. تصویر نمایش داده شده تصویر پس زمینه ای است که ما در CSS مشخص کرده ایم
  • width: 46px; height: 44px; – بخشی از تصویر را که می خواهیم استفاده کنیم مشخص می کند
  • background: url(img_navsprites.gif) 0 0; – تصویر پس زمینه و موقعیت آن را تعریف می کند (چپ 0 پیکسل ، 0 پیکسل بالا)

این ساده ترین راه برای استفاده از spritit های تصویری است ، اکنون می خواهیم آن را با استفاده از پیوندها و افکت های شناور گسترش دهیم.


Image Sprites – یک لیست پیمایش ایجاد کنید

ما می خواهیم از تصویر sprite (“img_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؛} – حاشیه و padding روی 0 تنظیم می شوند ، سبک list حذف می شود و همه موارد لیست به طور مطلق قرار می گیرند
  • #navlist li، #navlist a {height: 44px؛ display: block؛} – ارتفاع همه تصاویر 44px است

اکنون موقعیت و سبک را برای هر قسمت خاص شروع کنید:

  • #home {سمت چپ: 0px ؛ عرض: 46px؛} – تا انتها به سمت چپ قرار دارد و عرض تصویر 46px است
  • #home {background: url (img_navsprites.gif) 0 0؛} – تصویر پس زمینه و موقعیت آن را تعریف می کند (چپ 0 پیکسل ، 0 پیکسل بالا)
  • #prev {سمت چپ: 63px؛ عرض: 43px؛} – 63px در سمت راست قرار دارد (# عرض خانه 46px + مقداری فضای اضافی بین موارد) و عرض 43px است.
  • #prev {background: url (‘img_navsprites.gif’) -47px 0؛} – تصویر پس زمینه 47 پیکسل را در سمت راست تعریف می کند (عرض صفحه 46 پیکسل + تقسیم خط 1 پیکسل)
  • # بعدی {سمت چپ: 129px؛ عرض: 43px؛} – موقعیت 129px در سمت راست قرار دارد (شروع # پیشین 63px + # عرض پیشین 43px + فضای اضافی است) و عرض 43px است.
  • #next {background: url (‘img_navsprites.gif’) -91px 0؛} – تصویر پس زمینه 91 پیکسل را در سمت راست تعریف می کند (# عرض خانه 46 پیکسل + تقسیم خط 1 پیکسل + # عرض پیشین 43 پیکسل + تقسیم خط 1 پیکسل)


Image Sprites – Hover Effect

اکنون می خواهیم یک اثر شناور به لیست پیمایش خود اضافه کنیم.

نکته::hover انتخاب را می توان بر روی همه عناصر، نه تنها بر روی لینک استفاده می شود.

تصویر جدید ما (“img_navsprites_hover.gif”) شامل سه تصویر ناوبری و سه تصویر برای استفاده برای جلوه های شناور است:

از آنجا که این یک تصویر منفرد است و نه شش پرونده مجزا ، هنگامی که کاربر بر روی تصویر حرکت می کند تاخیری در بارگیری وجود نخواهد داشت .

ما فقط سه خط کد برای اضافه کردن اثر شناور اضافه می کنیم:

مثال

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

مثال توضیح داده شده:

  • #home a: hover {background: url (‘img_navsprites_hover.gif’) 0 -45px؛} – برای هر سه تصویر شناور ما موقعیت پس زمینه یکسانی را تعیین می کنیم ، فقط 45 پیکسل پایین تر

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها