it-swarm.asia

كيف يمكنني عمل Sprite مليئًا بالصور المختلفة (التحويم ، عدم التحويم ، إلخ)؟

أفهم أن هناك أدوات على الشبكة لإنشاء Sprite ، لكنني أرغب في معرفة كيفية إنشاء رموز للحالات المختلفة للرمز. هل هناك طريقة سهلة لجعل كل هذه الأشكال المختلفة لهذا الرمز:

alt text

(أيضًا ، هل يمكن أن تخبرني كيف يمكنني تحسين صياغة سؤالي بحيث لا يبدو أنني أطلب نصيحة Sprite؟)

3
goodguys_activate

إذا فهمت سؤالك ، وكنت تعلم بالفعل أن Sprite هو مجرد صورة تجمع بين الصورة ، فإن الجزء الأخير الذي تحتاج إلى معرفته هو حول CSS.

CSS هو ما يربط جزءًا من صورتك بالحالة. يمكنك إنشاء html يمثل الزر ، وتعيين فصل له ، ثم تكتب CSS الخاص بك.

.my-button{
    width:20px;
    height:20px;
    background:url('my-button-Sprite.gif') top left no-repeat;
}
.my-button:hover{background-position: 20px 0px;}

ما عليك سوى إضافة الإزاحة الأفقية المناسبة (الرقم الأول) لنتفوق على Sprite حيث يجب أن يظهر للحالة المطلوبة.

4
Daniel Rhoden

صور التحويم ليست الاستخدام الوحيد لـ CSS Sprite ، يمكنك أيضًا استخدام Sprite للصور الثابتة أو حالات الرموز المختلفة. ستقوم بإنشاء صورة واحدة تمامًا كما قدمتها كمثال واستخدام إحداثيات خلفية CSS مختلفة لكل حالة رمز. الحيلة هي مجرد الحصول على إحداثيات الخلفية الصحيحة.

0
Virtuosi Media