كيف أستخدم صور CSS Sprites في تصميم موقعي؟

css sprites هي تقنية تقوم على مبدأ استعمال صورة واحدة تحتوي على مجموعة من الخلفيات واستعمالها في حميع أزرار الموقع حيث يمكن تغيير خلفية الزر باستعمال خاصية background-position  في ملف التنسيق css، ويرجع الهدف من استعمال هذه التقنية إلى تسريع تحميل الموقع  والتقليل من استخدام موارد استضافة الموقع .

وهذا مثال تطبيقي :

تنسق كل زر في الموقع سيكتب على الشكل التالي :

<style>
 .toolbtn {background:url(myfile.png); display:inline-block; height:20px; width:20px } 
</style>

ثم حسب الزر والخلفية المراد اضهارها، من خلال الخاصية background-position:

<style>
#btn1 {background-position: -20px 0px}
#btn2 {background-position: -40px 0px}
</style>

كما يمكننا بنفس التقنية تغيير خلفية الزر عند مرور الفأرة فوقه، كمثال :

#btn1:hover {background-position: 60px 20px; }

حيث أن القيمتين ب px هي احداثايت الجزء في الصورة .