CSS اسپرائيت تصوير

سی ایس ایس گرڈ درسی

اختیاری کلاس

درسی کی سفارش:

تصویر اسپرائٹ

تصویر اسپرائٹ - تصویر اسپرائٹ کا معنیًا

کئی تصاویر والی ویب سائٹ، ممکن ہے کہ اپنے لوادھ میں طویل وقت لگائیں اور کئی سرور درخواستیں بھی بنائیں گی۔

نافيگاچيون ايميج

تصویر اسپرائٹ کا استعمال کرنا سرور کی درخواستوں کی تعداد کو کم کرے گا اور باڑ بچائے گا۔

تصویر اسپرائٹ - سادہ مثال

مثال

#home {
  width: 46px;
  height: 44px;
  - یہاں تک سے، ما یہاں تک کا تصویر استعمال کریں گا، کیونکہ src خاصیت خالی نہیں رہ سکتی۔ اس کی حقیقی طور پر نمودار تصویر وہی ثابت کی جائیگی جو ہم کس سی ایس ایس میں کا حوالہ دیں گے。
}

آزمایش کنید

توضیح مثال:

  • ما ایک واحد تصویر ("navsprites.gif") کا استعمال کر رہے ہیں، جس کی بجائے تین الگ الگ تصاویر استعمال نہیں کریں گے: ما سی ایس ایس کا استعمال کر کے صرف ضروری تصویر کا کوئی حصہ دکھا سکتے ہیں۔
  • در مثال زیر، سی ایس ایس، "navsprites.gif" تصویر کا کوئی حصہ نہیں دکھاتا: <img id="home" src="trans.gif">
  • - یہاں تک سے، ما یہاں تک کا تصویر استعمال کریں گا، کیونکہ src خاصیت خالی نہیں رہ سکتی۔ اس کی حقیقی طور پر نمودار تصویر وہی ثابت کی جائیگی جو ہم کس سی ایس ایس میں کا حوالہ دیں گے。 background: url(navsprites.gif) 0 0;

- پس منظر تصویر کی تعریف اور اس کی پوزیشن کا تعین (left 0px, top 0px)

آپ اپنے لئے انیمیشن سکریپٹ استعمال کریں گے، کیونکہ یہ کڑیوں کا بناؤ بھی ممکن ہوگا اور پس منظر تصاویر کا حامل بھی ہوگا:

بصورت کے ساتھ، 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;} - حاشیه و پادینگ به 0 تنظیم می‌شود، list-style حذف می‌شود و همه آیتم‌های لیست به موقعیت مطلق قرار می‌گیرند
  • #navlist li, #navlist a {height:44px;display:block;} - ارتفاع همه تصاویر 44px است

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

  • #home {left:0px;width:46px;} - قرارگیری به سمت چپ به طور مداوم، عرض تصویر 46px
  • #home {background:url(navsprites.gif) 0 0;} - تعریف تصویر پس‌زمینه و موقعیت آن (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - قرارگیری به سمت راست 63px (#home عرض 46px + فضای اضافی بین آیتم‌ها)، عرض 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - تعریف تصویر پس‌زمینه به سمت راست 47px (#home عرض 46px + 1px خط جداکننده)
  • #next {left:129px;width:43px;} - قرارگیری به سمت راست 129px (#prev شروع است 63px + عرض #prev است 43px + فضای اضافی)، عرض 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - تعریف تصویر پس‌زمینه به سمت راست 91px (#home عرض 46px + 1px خط جداکننده + #prev عرض 43px + 1px خط جداکننده)

image sprite - اثر حرکت ماوس

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

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

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

نافيگاچيون ايميج

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

ما تنها سه خط کد اضافه می‌کنیم تا اثر حرکت ماوس را ایجاد کنیم:

مثال

#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;} - ما برای سه تصویر اسکرول به طور یکسان مکان پشتیبان مشخص کرده‌ایم، تنها 45 پیکسل به پایین