CSS Sprite چیست ؟
دوشنبه 30 اردیبهشت 1392 12:17 PM
با سلام
CSS Sprite یکی از ترفندهای جالب در طراحی وب است که به دلیل کاهش درخواست های HTTP باعث
افزایش سرعت بارگزاری صفحات وب می شود .
گاهی اوقات ما می خواهیم تصویری در صفحه قرار دهیم و از آن به عنوان دکمه برای لینک دادن استفاده کنیم .
روش معمول این است که یک تصویر را در صفحه قرار دهیم و با استفاده از کد onmouseover تصویر
را هنگام ورود ماوس تغییر دهیم :
<div onmouseover="this.style.backgroundImage = 'somepic.gif'"
oumouseout="this.style.backgroundImage = 'anotherpic.gif"></div>
مثلا در قطعه کد بالا، با حرکت ماوس روی تصویر ، عکس somepic.gif فراخوانی می شود که
قاعدتا زمانی صرف لود شدن عکس مورد نظر میشود .
اما روش بهتر استفاده از خاصیت background-position در CSS است ؛
.btns1{background-image:url(1.jpg);background-position:0px -70px;}
.btns1:hover {background-image:url(1.jpg);background-position:0px 0px;}
<a href="http://rasekhoon.net/forum/thread/730120/page1/" target="_blank">
<div class="btns1"> </div>
</a>
در این کد از یک تصویر بعنوان بکگراند استفاده شده فقط در هنگام حرکت ماوس روی شیء btns1 ، محل بکگراند تغییر می کند
و نیمه بالایی تصویر نمایش داده میشود ؛ و در نتیجه لازم نیست تصویر دوباره لود شود و سرعت بارگذاری صفحه بیشتر میشود .
تصویر بک گراند :
مثال استفاده :
