הגדרת ה-GIF ' פורמט מחלף גרפיקה 'כתמונת רקע מוסיפה אלמנט מושך חזותית לעיצוב. GIF מאפשר למפתחים להעביר מידע או להדגיש מוצר או שירות אשר מסייע ביצירת הזהות החזותית של המותג. עם זאת, על המפתחים להבטיח שהשימוש בקובצי GIF לא יכניע את דף האינטרנט או יסיח את דעת המשתמש מהתוכן הראשי.

מאמר זה מדגים את ההליך של הגדרת GIF כתמונת רקע בדף האינטרנט.

כיצד להגדיר GIF כתמונת רקע בדף האינטרנט?

הגדרת GIF כתמונת רקע עוזרת ביצירת אלמנטים המושכים את העין על ידי הוספת אלמנטים ויזואליים.

קובצי GIF שימושיים במיוחד באתרים שרוצים לשדר תחושה של שובבות או גחמה, או בדפים שרוצים להדגיש מוצר או תכונה מסוימת. להגדרתו, כתמונת רקע בקר בדוגמאות הבאות:

דוגמה 1: הגדרת GIF כרקע קבוע

מכיוון שרכיבי ה-HTML המסייעים בבניית התוכן של דף האינטרנט ממוקמים בתוך ' <גוף> 'תג. לכן, בחירת ה' גוּף ' אלמנט והחלת מאפייני CSS עליו. זה משפיע על כל רכיבי ה-HTML המכילים של ' <גוף> 'תג.

למשל, ה'

' ו'

תגיות משמשות כתוכן של דף האינטרנט. ראה את קטע הקוד שלהלן:

< גוּף >
< h1 > הגדרת GIF כפי ש תמונת רקע בעמוד h1 >
< ע > GIF זה נוסף כפי ש תמונת רקע על כל העמוד באמצעות 'תמונת רקע' תכונה. מאמר זה הופעל על ידי Linuxhint. ע >
גוּף >

כעת, בחר את רכיב ה-HTML 'גוף' בתוך ' <סגנון> 'תג או ב' נפרד CSS ' קובץ להחלת סגנון בדף האינטרנט:

גוּף {
רקע-תמונה: url ( 'sea.gif' ) ;
רקע-חזרה: אין-חזרה;
רקע-גודל: כריכה;
ריפוד:50px;
גודל גופן: x-large;
צבע לבן;
}

בגוש הקוד שלמעלה:

• • קודם ה ' url() נעשה שימוש בשיטת ' המאחסנת את הנתיב של ' GIF 'קובץ. ושיטה זו מועברת כערך ל-CSS ' תמונת רקע ' תכונה.
  • לאחר מכן, הגדר את ' ללא חזרה 'כערך ל-CSS' רקע-חזרה ' מאפיין עבור החזרה של קובץ ה-GIF.
  • לאחר מכן, הגדר את הערך של ' כיסוי 'ל-CSS' גודל רקע ” נכס לכיסוי כל השטח הפנוי
  • לאחר מכן, ספק את הערך של ' 50 פיקסלים ' ו' אקסטרה לארג 'ל-CSS' ריפוד ' ו' גודל גופן ” נכסים, בהתאמה. זה מוסיף מרווח סביב הטקסט ומגדיל את גודל הגופן.

לאחר הקומפילציה, דף האינטרנט נראה כך:

הפלט לעיל מראה ש-GIF נוסף כרקע בדף האינטרנט.

דוגמה 2: הגדרת GIF כרקע ניתן לגלילה

בתחילה, צור מבנה HTML כדי ליצור תוכן של דף אינטרנט כך:

< div מעמד = 'contai' >
< h1 > הגדרת GIF כפי ש תמונת רקע בעמוד h1 >
< ע > GIF זה נוסף כפי ש תמונת רקע על כל העמוד באמצעות ה- 'תמונת רקע' תכונה. מאמר זה הופעל על ידי Linuxhint. ע >
div >

< div >
< h3 סִגְנוֹן = 'צבע לבן;' > תוכן שנכתב מחוץ ל 'div' אֵלֵמֶנט h3 >
div >

בקוד למעלה:

• • ראשית, ההורה'
    'תג משמש עם מחלקה של ' לְהַכִיל '.
  • לאחר מכן, השתמש ב' h1 ' ו' ע רכיבי HTML ולספק להם תוכן דמה.
  • לאחר מכן, צור עוד '
    ולהשתמש ב-'

    ' תג על ידי מתן נתוני דמה לו.

כעת, הוסף GIF כרקע בדף האינטרנט על ידי הוספת מאפייני ה-CSS הבאים:

.contai {
רקע-תמונה: url ( sea.gif ');
רקע-חזרה: אין-חזרה;
רקע-גודל: כריכה;
גובה: 100Vh;
תצוגה: flex;
align-items: center;
להצדיק-תוכן: מרכז;
flex-direction: עמודה;
צבע לבן;
גודל גופן: גדול;
יישור טקסט: מרכז;
ריפוד: 2rem;
}

התיאור של בלוק הקוד שלמעלה:

• • ראשית, הגדר את ' נתיב תמונה ', ' ללא חזרה t' ו-' כיסוי 'כערך ל-CSS' תמונת רקע ', ' רקע-חזרה ' ו' גודל רקע ” נכסים, בהתאמה.
  • לאחר מכן, הגדר את הערך של ' 100vh ' ו' לְהַגמִישׁ 'ל-CSS' גוֹבַה ' ו' לְהַצִיג ' נכסים.
  • לאחר מכן, השתמש ב-CSS ' צֶבַע ', ' גודל גופן ', ' יישור טקסט ' ו' ריפוד ' מאפיינים להחלת סגנון על התוכן.

לאחר סיום תהליך ההידור, דף האינטרנט נראה כך:

הפלט מציג כי ' GIF ' הוכנסה כתמונת רקע בכל העמוד.

סיכום

כדי להגדיר GIF כתמונת רקע בדף האינטרנט, ה-CSS ' תמונת רקע 'מאפיין משמש ב-HTML' גוּף ' אלמנט. מאפיין ה-CSS שמוחל על אלמנט 'body' מוחל באופן אוטומטי על כל האלמנטים המכילים. על ידי הגדרת ' 100vh ' כערך למאפיין הגובה, ניתן להפעיל גם את אפקט הגלילה. זה מאפשר לגיף הרקע לנוע לאורך הגלילה. מאמר זה הדגים כיצד להגדיר GIF כתמונת רקע בדף האינטרנט.