כיום יש ביקוש לאתרים עם תמונות רקע רספונסיביות. אתרים רספונסיביים מספקים למשתמשים חווית משתמש אידיאלית כמעט בכל המכשירים כולל ניידים, טאבלטים או מחשבים שולחניים. תמונות רספונסיביות יכולות להתאים את הרקע של האתר, גודל מסך ומידות. תמונות רספונסיביות מבטיחות שהאיכות והפרופורציה נשמרות. בנוסף, האתר עם תמונות רקע רספונסיביות נטען במהירות.
מדריך זה יספק הנחיות להתאמת תמונות הרקע למידות המסך.
כיצד להתאים תמונות רקע למידות המסך?
התמונה יכולה להתאים למידות המסך על ידי מעבר על ההוראות המפורטות להלן.
שלב 1: צור מבנה HTML
ראשית, צור מבנה HTML והוסף את גיליון הסגנונות החיצוני באמצעות ה <קישור> תג בקטע head של HTML. לשם כך, פשוט הצב את ' ' בתוך תג הראש. ה ' rel ' תג מציין את הקשר של הקובץ עם מסמך ה-HTML. ה ' href 'תג מציין את כתובת קובץ ה-CSS:
< html >
< רֹאשׁ >
< קישור rel = 'גיליון סגנונות' href = 'style.css' >
< כותרת > תמונת רקע רספונסיבית כותרת >
רֹאשׁ >
< גוּף >
-- אזור להוספת התוכן האחר-- >
גוּף >
html >
שלב 2: החל CSS
כעת, החל את ה-CSS על ' גוּף ' סעיף. ראשית, ציין את תמונת הרקע. לשם כך, השתמש ב-' תמונת רקע ' וציין את ' url() ' ערך המכיל את כתובת קובץ התמונה.
לאחר מכן, השתמש ב' תמונת רקע ' כדי לציין את גודל התמונה, ' רקע-חזרה ' מאפיין כדי להגדיר את החזרה על התמונה, ו' רקע-מצורף ' כדי לקבוע אם התמונה תגלול עם שאר העמוד או לא. לבסוף, הגדר את ' שולים ' ו' ריפוד ' ל ' 0 ”:
גוּף {רקע-תמונה: url ( 'test-image.jpg' ) ;
גודל רקע: 100 % 100 % ;
/* קנה קנה מידה של התמונה ל 100 % רוחב ו 100 % גוֹבַה */
רקע-חזרה: אין-חזרה;
רקע-מצורף: קבוע;
שולים: 0 ;
ריפוד: 0 ;
/* אופציונלי: רקע קבוע */
}
תְפוּקָה
זה הפלט לפני כיווץ חלון הדפדפן:
לאחר התכווצות הדפדפן:
הפלט לעיל מאשר שהתמונה התאימה את הרקע למידות המסך.
סיכום
כדי להתאים תמונות רקע לממדי המסך, תחילה, כלול את ' נקודת מבט ” בסעיף הראש לשליטה במידות ובקנה מידה. לאחר מכן, צור מבנה HTML והחל CSS. ב-CSS, הגדר את ' בגודל רקע ' ערך הנכס ל' כיסוי ' ערך כדי לשנות את קנה המידה של גובה ורוחב של תמונה. מאמר זה הציג מדריך מלא להתאמת תמונות רקע למידות המסך.