ال ' صورة العفاريت 'هي تقنية يتم فيها إنشاء صورة واحدة كبيرة تتكون من عدة صور مفردة. ويمكن عرض أي جزء من الصورة الكبيرة بالنسبة لمتطلبات التصميم. يساعد المطورين على بناء عناصر جذابة بصريًا بسلاسة. يمكن استخدام الصور المتحركة للأيقونات والأزرار والعناصر الرسومية الأخرى. توضح هذه المقالة الإجراء خطوة بخطوة لاستخدام الصور المتحركة في CSS.
كيف تستعمل أنا بركه العفاريت في CSS؟
في CSS ، يستخدم المطورون الصور المتحركة لتقليل / تقليل وقت تحميل صفحة الويب. يساعد في تقليل طلبات HTTP ، ويضمن سرعة التحميل ، ويحسن عامل تجربة المستخدم. على سبيل المثال ، قم بزيارة المثال أدناه:
مثال: استخدام Image Sprite في عنصر القائمة
في هذا المثال ، يتم إنشاء قائمة مرتبة وفي كل عنصر قائمة ، يتم عرض جزء من صورة الكائن على الشاشة.
المتطلبات المسبقة:
للحصول على الصورة المحددة من الصورة المتحركة ، فإن أبعاد الصورة المتحركة التي يتم استخدامها لها أهمية خاصة. على سبيل المثال ، الصورة التي لها بُعد ' 937 × 156 'موضح أدناه:
اتبع الخطوات التالية لعرض جزء من الصورة المعروضة أعلاه:
الخطوة 1: إنشاء عناصر القائمة
يتم إنشاء القائمة غير المرتبة على صفحة الويب ، كما هو موضح في مقتطف الشفرة أدناه:
< ماي >فارغ: < الذي - التي بطاقة تعريف = 'فارغ' > الذي - التي >
نصف: < الذي - التي بطاقة تعريف = 'نصف' > الذي - التي >
ممتلىء: < الذي - التي بطاقة تعريف = 'ممتلىء' > الذي - التي >
ماي >
وصف مقتطف الشفرة أعلاه:
-
- أولاً ، استخدم '
- بعد ذلك ، قم بتعيين معرفات ' فارغ '،' نصف ' و ' ممتلىء لثلاثة عناصر قائمة. يتم استخدامها لاحقًا لعرض جزء من الصورة الأكبر.
- أولاً ، استخدم '
الخطوة الثانية: عرض الصورة الأولى
لعرض القلب الفارغ على صفحة الويب وهي الصورة الأولى في كائن الصورة. استخدم ال ' فارغ 'وأدخل الكود التالي:
#فارغ {العرض: 157 بكسل ؛
الارتفاع: 150 بكسل ؛
الخلفية: url ( .. / sprite.jpg ) 0 0 ؛
}
في سطر الرموز أعلاه:
-
- أولاً ، قم بتعيين ' عرض ' و ' ارتفاع 'للصورة التي يريد المطور عرضها على صفحة الويب.
- يتم تعيين هذه الخصائص لقيم ' 157 بكسل ' و ' 150 بكسل 'وفقًا للمثال المذكور أعلاه ، لكنها قد تختلف بالنسبة للصور ذات الأبعاد المختلفة.
- بعد ذلك ، قدم مسار ' شبح 'صورة إلى' خلفية ' ملكية. الآن ، حدد اتجاه ' 0 ' و ' 0 ويعرض الجزء الأول من كائن الصورة.
بعد تنفيذ سطر التعليمات البرمجية أعلاه ، تبدو صفحة الويب كما يلي:
توضح اللقطة أعلاه أن الصورة الأولى من كائن الصورة يتم عرضها على صفحة الويب.
الخطوة 3: عرض الصورة الوسطى والأخيرة
لعرض جزء الصورة الأوسط والأخير من كائن الصورة ، أدخل خصائص CSS التالية:
#نصف {العرض: 157 بكسل ؛
الارتفاع: 150 بكسل ؛
الخلفية: url ( .. / sprite.jpg ) -462 بكسل 0 بكسل
}
#ممتلىء {
العرض: 157 بكسل ؛
الارتفاع: 150 بكسل ؛
الخلفية: url ( .. / sprite.jpg ) -770px 0 بكسل
}
وصف مقتطف الشفرة أعلاه:
-
- أولاً ، حدد ' نصف 'وأدخل نفس خصائص CSS المستخدمة في الخطوة أعلاه.
- لعرض الصورة الوسطى من كائن الصورة ، قم بتغيير الاتجاه أو تعيين مساحة متروكة من الجانب الأيسر. على سبيل المثال ، يتم تعيين الاتجاه من اليسار على ' 462 بكسل سلبي '.
- بنفس الطريقة ، اعرض الصورة الأخيرة عن طريق ضبط الاتجاه من اليسار إلى ' -770px '.
بعد تنفيذ خصائص CSS أعلاه ، تظهر صفحة الويب على النحو التالي:
توضح اللقطة أعلاه أنه تم عرض الصور الثلاث من كائن الصورة على صفحة الويب.
خاتمة
ال ' صورة العفاريت 'عبارة عن صورة واحدة كبيرة تتكون من عدة صور أصغر حجمًا تمامًا مثل ميزة الصورة المجمعة. ويمكن عرض أي جزء من الصورة الكبيرة يمثل صورة أصغر. وفقًا لمتطلبات استخدام ' خلفية 'التي قدمتها CSS. لعرض الصورة المحددة من كائن الصورة ، قم أولاً بتعيين عرض الصورة وارتفاعها. بعد ذلك ، استخدم قيم الاتجاهات لعرض جزء الصورة فقط من كائن الصورة.