آموزش روش CSS Image Sprites

سلام خدمت شما دوستان عزیز ..

آموزش روش CSS Image Sprites

در این روش شما همه نصاویر خود را در یک تصویر بزرگتر ادغام میکنید که باعث کم حجم شدن تصاویر و نیز کمتر شدن تعداد درخواست ها به سرور خواهد شد .

به عنوان مثال به تصویر زیر نگاه کنید :

CSS Image

در این تصویر ما چندین عکس را در یک تصویر بزرگتر ادغام کرده ایم .

در این حالت با کاهش حجم خیلی زیادی روبرو خواهیم شد .

حال نوبت این میباشد که از این فایل بتوانیم استفاده کنیم :

برای این کار شما کافی است که یک id و یا یک class به تگ مورد نظر خود اختصاص دهید و سپس با استفاده از height , width , background در CSS موقعیت و اندازه تصویر را تعیین کنید .

به عنوان مثال شما میتوانید برای استفاده از لوگو توییتر در عکس مورد نظر به صورت زیر عمل کنید :

ابتدا یک تگ div با کلاس logo ایجاد میکنیم :

و کد CSS را به شکل زیر استفاده خواهیم کرد :

خب همانطور که میبینید با استفاده از height و width طول و عرض تصویر را تعیین کرده ایم و با استفاده از background آدرس تصویر و سپس ۲ مقدار برحسب px و سپس عدم تکرار تصویر را تعیین کرده ایم . قسمت مهمی که باید در نظر داشته باشید مقداری میباشد که برحسب پیکسل نوشتیم . این ۲ مقدار مختصات تصویر میباشد .در نظر داشته باشید که مبدا مختصات بالا سمت چپ میباشد و مقداری که ما وارد کرده ایم یعنی ۳۸۵ پیکسل یعنی تصویر بزرگ ابتدا ۳۸۵ پیکسل به سمت راست و مقدار دوم یعنی ۱۰ پیکسل هم یعنی عکس به اندازه ۱۰ پیکسل به سمت پایین حرکت کند . به این صورت لوگوی مد نظر ما انتخاب خواهد شد .

در نظر داشته باشید هرچه مقدار عرض را افزایش دهید نقطه شروع به سمت راست حرکت خواهد کرد و هرجه مقدار طول را افزایش دهید نقطه شروع به سمت پایین حرکت خواهد کرد .

 

آموزش روش CSS Image Sprites
امتیاز شما :

ممکن است شما دوست داشته باشید بیشتر از نویسنده

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.