CSS Image Sprites

 یکی از موارد طولانی بودن زمان لود یک صفحه وب تعداد عکس های موجود در صفحه می باشد ، برای نمایش هر عکس یک درخواست به سمت سرور فرستاده می شود  . به تعداد عکس های موجود در یک صفحه  درخواست به سمت سرور فرستاده می شود .  با استفاده از Css Sprites می توانیم تعداد دفعات درخواست های فرستاده شده به سمت سرور را برای نمایش عکس های صفحه کاهش دهیم . 

فرض کنید در یک صفحه وب بخواهیم برای نمایش آیتم های مختلف از عکس استفاده کنیم ، برای این کار دو روش وجود دارد :

روش اول : برای هر آیتم از یک عکس جداگانه استفاده کنیم .

روش دوم : مجموعه تصاویر مورد نظر را در قالب یک عکس قرار دهیم و جهت نمایش هر کدام از عکس های مورد نظر از خاصیت background-position استفاده کنیم .

مزایای استفاده از Css Sprites :

  • کاهش تعداد دفعات درخواست های سرور و پهنای باند
  • کاهش زمان بارگذاری صفحه

عکس  زیر نمونه هایی از بکار بردن css Sprites می باشد که مجموعه ای از عکس های مورد نیاز را در قالب یک عکس قرار داده است :

 CSSSprites-Learningschool

به مثال زیر توجه کنید ، در عکس زیر  برای استفاده از هر کدام از آیتم های موجود می بایست از خاصیت

Background-position استفاده کرد .

مقدار دهی  Background-position  به صورت زیر می باشد :

Background-position: 0 0;

مقدار اول نوع حرکت افقی ، بر روی عکس را تعیین میکند میتواند مثبت یا منفی باشد.

مقدار دوم نوع حرکت عمودی ، بر روی عکس را مشخص میکند می تواند مثبت یا منفی باشد .

برای استفاده از فلش سمت راست در عکس بالا ، برای پس زمینه یک المان به صورت زیر عمل میکنیم :

 width: 43px;
 background: url('img_navsprites.gif') -91px 0;

 تعیین اندازه عرض برای این است که سایر قسمت های عکس دیده نشود. اندازه را بر حسب اندازه عکس مورد نظر تعیین میکنیم ، در مثال بالا اندازه فلش مورد نظر 43px می باشد  .

ایجاد منویی با استفاده از Css Sprites :

می خواهیم منوی زیر را با استفاده از CSS Sprites ایجاد کنیم ، قسمت بالای خط افقی عکس ، حالت عادی آیتم ها می باشد و قسمت پایین خط افقی زمانی که بر روی المان ماوس قرار گرفت نمایش داده می شود .

<ul>
<li id=“home”> خانه </li>
<li id=“about”> درباره </li>
<li id=“contact”> تماس </li>
</ul>

برای المان "درباره ما " کدهای زیر را می نویسیم :

li#menu a {
width:150px;
height: 75px;
background: url(menu.gif) no-repeat -300px 0;
text-indent: -3000px; // hide text
}


li#menu a#about {
background-position: -150px 0;
}


li#menu a#about:hover {
background-position: -150px -75px;
}

 


توسط : عثمان رحیمی  1 ماه قبل ، سه شنبه 4 شهریور 1393 ساعت 05:45  0  705

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


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط