این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کامل Image Sprites در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل Image Sprites در CSS با من همراه باشید.
Free-Learn
Image Sprites در CSS چیست؟
بطور کلی به مجموعه ای از چندین عکس که درون یک تصویر واحد قرار میگیرند Image Sprites می گوییم ، یعنی در واقع اینجوری بگیم به چندین تصویر کوچک شده که در کنار همدیگر در یک تصویر واحد قرار دارند عکس اسپریت شده می گوییم.
قبلنا که هنوز فونت آیکون ها درست نشده بودن خب از تصاویر بجای آیکون ها استفاده میکردن، یعنی مثلا اگه میخواستن آیکون جستجو رو در فلان جای سایت نمایش میدادن خب باید از همین تکنیک Image Sprites استفاده میکردن.
پس میومدن همه ی عکس هارو درون یک عکس واحد میزاشتن بعدش دیگه با استفاده از CSS به اون عکس دلخواهشون دسترسی پیدا میکردن و نمایشش میدادن.
الانه دیگه خیلی خیلی کم سایتی هستش که از Image Sprites استفاده کنه یا استفاده کرده باشه، چون الان دیگه فونت آیکون ها همه جوره جایگزین Image Sprites شدن. پس پیشنهاد منم اینه که شما از فونت آیکون ها استفاده کنید.
خب بریم تا یه عکس Image Sprites رو باهم ببینیم :
- الان این ۱دونه عکس هست ولی خب همونطور که میبینید من چندین عکس دیگه داخلش قرار دادم
خب حالا فرض میکنیم من میخوام آیکون فیسبوک رو در فلان جای سایتم نمایش بدم، خیلی خیلی راحت با چند خط کد میتونیم اینکارو انجام بدیم.
مرحله اول : کل عکس رو نمایش میدیم
|
1 2 3 4 5 6 7 8 |
<style> .MyIcon{ background-image:url("files/image-sprites.png"); height:194px; } </style> |
مرحله دوم : با استفاده از ویژگی background-position محل یا موقعیت اون قسمت از عکس رو که میخوایم به نمایش دربیاریم، انتخاب میکنیم.
|
1 2 3 4 5 6 7 8 9 |
<style> .MyIcon{ background-image: url("files/image-sprites.png"); background-repeat: no-repeat; background-position: -77px 0; } </style> |
مثال شماره ۳ : نمایش لوگوی HTML
|
1 2 3 4 5 6 7 |
<style> .MyIcon{ background-position: -77px -135px; } </style> |
