اسپرایت تصویر (Image Sprites) در CSS
«اسپرایت تصویر (Image Sprite)» مجموعه ای از چند تصویر کوچک است که در یک فایل بزرگ تر کنار هم قرار می گیرند. بنابراین مرورگر به جای چند درخواست، تنها یک فایل دانلود می کند و در نتیجه تعداد درخواست ها و مصرف پهنای باند کاهش می یابد.
اسپرایت تصویر چیست و چرا مهم است؟
یک فایل اسپرایت معمولاً به صورت شبکه ای چیده می شود. سپس با CSS مشخص می کنیم کدام بخش از آن فایل روی هر المان نمایش داده شود. این روش، به ویژه در منوهای آیکونی، سریع تر است و تجربه کاربری بهتری می سازد.
ویژگی های کلیدی برای اسپرایت تصویر
در کد CSS، از دو ویژگی زیر استفاده می کنیم تا بخش دلخواه از تصویر اسپرایت دیده شود:
background-imagebackground-position
نمونه: نگاشت آیکون ها از اسپرایت
در این مثال، هر شناسه عرض و ارتفاع آیکون خود را دارد و با جابه جایی پس زمینه، قسمت صحیح از «img_navsprites.gif» نمایش داده می شود:
#home { width: 46px; height: 44px; background-image: url(img_navsprites.gif); background-position: 0 0; }
#prev { width: 43px; height: 44px; background-image: url('img_navsprites.gif'); background-position: -47px 0; }
#next { width: 43px; height: 44px; background-image: url('img_navsprites.gif'); background-position: -91px 0; }نکته: مقدارهای منفی در background-position باعث می شوند بخش های سمت راست یا پایین اسپرایت دیده شوند.
استفاده اسپرایت در فهرست ناوبری
می توانیم یک فهرست ناوبری با آیکون های اسپرایتی بسازیم. در کد زیر جایگذاری و ارتفاع آیتم ها تنظیم شده است:
#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: 0; width: 46px; background: url('img_navsprites.gif') 0 0; }
#prev { left: 60px; width: 43px; background: url('img_navsprites.gif') -47px 0; }
#next { left: 120px; width: 43px; background: url('img_navsprites.gif') -91px 0; }هشدار: مقادیر left را نسبت به ابعاد واقعی آیکون ها و فاصله دلخواه میان آیتم ها تنظیم کنید؛ در غیر این صورت هم پوشانی رخ می دهد.
افزودن حالت هاور به اسپرایت تصویر
برای هاور، کافی است نسخه هاور آیکون ها در همان فایل اسپرایت قرار گیرد. سپس با تغییر background و جابه جایی محور Y، آیکون هاور نمایش داده می شود:
#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; }نکته: چون هاور در همان فایل است، هنگام قرارگیری ماوس، تأخیری برای دانلود نداریم و تغییر سریع خواهد بود.
مسیرهای بعدی یادگیری
برای چیدمان گالری ها به گالری تصاویر مراجعه کنید. همچنین منوهای کشویی را در Dropdowns ببینید. برای مرور سریع، صفحه اسپرایت تصویر را نشان گذاری کنید.
یادگیری بیشتر درباره پس زمینه
مستندات background-image و background-position را نیز حتماً مطالعه کنید؛ زیرا درک دقیق این دو، کار با اسپرایت ها را ساده تر می کند.