مقالة مقدمة من wulin.com (www.vevb.com): تعتبر CSS Sprite ، التي تسمى أحيانًا صورة Sprite و Elf ، مشكلة في كل لقاءات افتتاحية أمامية ، وهي أيضًا طريقة شائعة لتحسين تحميل الصور الصغيرة. أعتقد أن جميع الطلاب يعرفون المبدأ ، لذلك لن أخوض في التفاصيل.
تعتبر CSS Sprite ، التي تسمى أحيانًا العفريت والعفريت ، مشكلة يفتح كل الواجهة الأمامية وهي أيضًا طريقة شائعة لتحسين تحميل الصور الصغيرة. أعتقد أن جميع الطلاب يعرفون المبدأ ، لذلك لن أخوض في التفاصيل.
لطالما كنت متحمسًا لاستخدام HTML5 لتحقيق أداة لتجميع صور Sprite ، مما يسهل التطور السريع للمشاريع الصغيرة ويقلل من بعض العمالة الميكانيكية مثل فتح Photoshop والألعاب النارية وغيرها من الأدوات لدمج الصور. في الآونة الأخيرة ، استغرقت أخيرًا وقتًا لتصوره وتنفيذه.
GO! PNG مقدمة:الوظائف الحالية هي كما يلي:
تعليمات الاستخدام: 1. اسحب وإسقاط ملف الصورة الصغيرة إلى منطقة التشغيل ، كما هو موضح أدناه: 2. إعدادات سمة فئة الإدخال وصورة الهدف وتوليد ملفات CSS ، كما هو موضح في الشكل أدناه 3. يمكن تخصيص ملف CSS الذي تم إنشاؤه عن طريق تغيير قالب CSS.وظيفة القالب المستخدمة هي التثبيت الدقيق لجون ريسج.
المتغيرات التي يمكن استخدامها هي:
تفسيرات X و Y و W و H هي كما يلي:
إعدادات قالب CSS هي كما يلي:
4. بعد إنشاء الصور المستهدفة و CSS ، يمكنك تنزيلها مباشرةانقر فوق زر التنزيل لإكمال التنزيل:
5. تصدير حالة العمليمكن لهذه الوظيفة تصدير حالة العمل الحالية الخاصة بك ، بما في ذلك بيانات الصورة (الصور ، وترتيب موقع الصورة) ، وإعدادات المعلمة (بما في ذلك إعدادات معلمة الصفحة الرئيسية وإعدادات قالب CSS) ، إلى ملف واحد ، ويمكنك استعادة حالة العمل في المرة القادمة باستخدام هذا الملف.
تصدير الشكل التالي:
استيراد الشكل التالي:
يمكن استعادة: