ה ' ספרייטים של תמונה ” היא טכניקה שבה נוצרת תמונה אחת גדולה המורכבת ממספר תמונות בודדות. וניתן להציג כל חלק מהתמונה הגדולה ביחס לדרישות העיצוב. זה עוזר למפתחים לבנות אלמנטים מושכים ויזואלית בצורה חלקה. ניתן להשתמש ב-sprites של תמונה עבור סמלים, כפתורים ואלמנטים גרפיים אחרים. מאמר זה מדגים את ההליך שלב אחר שלב של שימוש ב-image sprites ב-CSS.
כיצד להשתמש ב-I Mage Sprites ב-CSS?
ב-CSS, המפתחים משתמשים ב-image sprites כדי למזער/להפחית את זמן הטעינה של דף אינטרנט. זה עוזר בהפחתת בקשות HTTP, מבטיח טעינה מהירה יותר ומשפר את גורם חווית המשתמש. לדוגמה, בקר בדוגמה הבאה:
דוגמה: שימוש ב-Image Sprite בפריט רשימה
בדוגמה זו נוצרת רשימה מסודרת ובכל פריט רשימה מוצג חלק מתמונת הספרייט על המסך.
תְנַאִי מוּקדָם:
כדי לקבל את התמונה הספציפית מהספרייט של התמונה חשובות במיוחד הממדים של ספרייט התמונה שנמצאת בשימוש. לדוגמה, התמונה שיש לה ממד של ' 937×156 ' מוצג להלן:
בצע את השלבים הבאים כדי להציג חלק מהתמונה המוצגת למעלה:
שלב 1: יצירת פריטי רשימה
הרשימה הלא מסודרת נוצרת בדף האינטרנט, כפי שניתן לראות בקטע הקוד שלהלן:
< ul >ריק: < זֶה תְעוּדַת זֶהוּת = 'ריק' > זֶה >
חֲצִי: < זֶה תְעוּדַת זֶהוּת = 'חֲצִי' > זֶה >
מלא: < זֶה תְעוּדַת זֶהוּת = 'מלא' > זֶה >
ul >
התיאור של קטע הקוד שלמעלה:
-
- ראשית, השתמש ב'
- לאחר מכן, הקצה את המזהים של ' ריק ', ' חֲצִי ' ו' מלא ' עבור שלושה פריטי רשימה. אלה מנוצלים מאוחר יותר כדי להציג חלק מהתמונה הגדולה יותר.
- ראשית, השתמש ב'
שלב 2: הצגת התמונה הראשונה
כדי להציג את הלב הריק בדף האינטרנט שהוא התמונה הראשונה בספרייט התמונה. להשתמש ב ' ריק ' id והכנס את הקוד הבא:
#ריק {רוחב: 157 פיקסלים;
גובה: 150 פיקסלים;
רקע: כתובת אתר ( .. / sprite.jpg ) 0 0 ;
}
בשורת הקודים לעיל:
-
- ראשית, הגדר את ' רוֹחַב ' ו' גוֹבַה ' של התמונה שהמפתח רוצה להציג בדף האינטרנט.
- מאפיינים אלה מוקצים לערכים של ' 157 פיקסלים ' ו' 150 פיקסלים ' על פי הדוגמה שצוינה לעיל, אך הם עשויים להשתנות ביחס לתמונות בעלות ממדים שונים.
- לאחר מכן, ספק את הנתיב של ' שֵׁדוֹן תמונה ל' רקע כללי ' תכונה. כעת, קבע את הכיוון של ' 0 ' ו' 0 ' והוא מציג את החלק הראשון של ספרייט התמונה.
לאחר ביצוע שורת הקוד שלמעלה, דף האינטרנט נראה כך:
תמונת המצב שלמעלה מראה שהתמונה הראשונה מהספרייט של התמונה מוצגת בדף האינטרנט.
שלב 3: הצגת התמונה האמצעית והאחרונה
להצגת חלק התמונה האמצעי והאחרון מהספרייט של התמונה, הכנס את מאפייני ה-CSS הבאים:
#חצי {רוחב: 157 פיקסלים;
גובה: 150 פיקסלים;
רקע: כתובת אתר ( .. / sprite.jpg ) -462 פיקסלים 0px
}
#מלא {
רוחב: 157 פיקסלים;
גובה: 150 פיקסלים;
רקע: כתובת אתר ( .. / sprite.jpg ) -770 פיקסלים 0px
}
התיאור של קטע הקוד שלמעלה:
-
- ראשית, בחר את ' חֲצִי ' מזהה והכנס את אותם מאפייני CSS המשמשים בשלב שלמעלה.
- כדי להציג את התמונה האמצעית מהספרייט של התמונה, שנה את הכיוון או הקצה ריפוד מצד שמאל. לדוגמה, הכיוון משמאל מוגדר ל' שלילי 462px '.
- באותו אופן, הצג את התמונה האחרונה על ידי הגדרת הכיוון משמאל ל' -770 פיקסלים '.
לאחר ביצוע מאפייני ה-CSS הנ'ל, דף האינטרנט מופיע כך:
תמונת המצב שלמעלה מראה ששלושת התמונות מהספרייט של התמונה הוצגו בדף האינטרנט.
סיכום
ה ' ספרייטים של תמונה ' היא תמונה אחת גדולה המורכבת ממספר תמונות קטנות יותר בדיוק כמו תכונת הקולאז'. וניתן להציג כל חלק מהתמונה הגדולה שמייצגת תמונה קטנה יותר. על פי הדרישות באמצעות ' רקע כללי 'נכס מסופק על ידי CSS. כדי להציג את התמונה הספציפית מהספרייט של התמונה, הגדר תחילה את הרוחב והגובה של התמונה. לאחר מכן, השתמש בערכי הכיוונים כדי להציג רק את החלק של התמונה מתוך ספרייט התמונה.