כיצד ליישם תמונת רקע ב- CSS?

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

• תמונת רקע במאפייני CSS
• תמונת רקע ב- CSS
• חזור על רקע
• מצורף רקע
• מיקום רקע
• תמונת רקע בגודל CSS
• צבע רקע

תמונת רקע במאפייני CSS

ישנם מאפיינים רבים המשמשים לבקרת ההתנהגויות והמיקום של התמונה. מאפיינים אלה הם:

• תמונת רקע
• חזור על רקע
• מצורף רקע
• עמדת רקע
• גודל רקע
• צבע רקע

נכיר את כל אחד מהמאפיינים הללו ונראה מתי וכיצד להשתמש בהם בעזרת הדגמה מעניינת כלשהי.

תמונת רקע ב- CSS

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

תחביר: תמונת רקע: url | none | שיפוע לינארי | שיפוע רדיאלי

גוף {רקע-תמונה: url ('apple.jpg')}
רקע באמצעות url
 

בואו להבין את הפרמטרים:

• url: הקלט לפרמטר זה מאפשר לנו לציין נתיב קובץ לתמונה כלשהי או כתובת ה- URL לתמונה אשר יש להגדיר כרקע. על מנת להכריז על יותר מתמונה אחת, כתובות ה- URL מופרדות באמצעות מפריד פסיקים.

גוף {רקע-תמונה: url ('apple.jpg')}

כיצד להרכיב קוד Java

• אף אחד: זהו ערך ברירת המחדל של הנכס ולא מוצגת תמונת רקע אם צוין ערכו.

גוף {רקע: אין}

• שיפוע לינארי (): תמונת הרקע מוגדרת לשיפוע לינארי. יש לציין מינימום של שני צבעים לפחות עבור מאפיין זה, כלומר מלמעלה למטה.

גוף {רקע-צבע: # 001 תמונת רקע: שיפוע ליניארי (לבן 15%, שקוף 16%), שיפוע לינארי (לבן 15%, שקוף 16%) גודל רקע: 60 פיקסלים 60 פיקס מיקום רקע: 0 0, 30 פיקסלים 30 פיקסלים}

• שיפוע רדיאלי (): תמונת הרקע מוגדרת לשיפוע רדיאלי. יש לציין מינימום של שני צבעים לפחות עבור מאפיין זה, כלומר למרכז לקצוות.

גוף {רקע-צבע: # 001 תמונת רקע: שיפוע רדיאלי (לבן 15%, שקוף 16%), שיפוע רדיאלי (לבן 15%, שקוף 16%) גודל רקע: 60 פיקסלים 60 פיקסים מיקום רקע: 0 0, 30 פיקסלים 30 פיקסלים}

• שיפוע חוזר-לינארי (): זה חוזר על שיפוע ליניארי. הבה נשתמש באותה דוגמה שראינו לעיל במדרון הליניארי לחזרה-לינארית-שיפוע ונראה את ההבדל.

גוף {רקע-צבע: # 001 תמונת רקע: חוזר-לינארי-שיפוע (לבן 15%, שקוף 16%), חוזר-ליניארי-שיפוע (לבן 15%, שקוף 16%) גודל רקע: 60 פיקסלים 60 פיקסלים : 0 0, 30 פיקסלים 30 פיקסלים}

• שיפוע חוזר-רדיאלי (): זה חוזר על שיפוע רדיאלי. בואו נחקור את אותה הדוגמה בה השתמשנו לעיל בשיפוע רדיאלי.

גוף {רקע-צבע: # 001 תמונת רקע: חוזר-רדיאלי-שיפוע (לבן 15%, שקוף 16%), חוזר-רדיאלי-שיפוע (לבן 15%, שקוף 16%) גודל רקע: 60 פיקסלים 60 פיקס-מיקום רקע : 0 0, 30 פיקסלים 30 פיקסלים}

רקע נפילה

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

זה לא מקלקל את חוויית המשתמש וניתן להכריז עליו כך:

גוף {רקע: url (apple_lost.jpg) ורוד}

רקע מרובה

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

להלן הדוגמה למספר תמונות רקע:

גוף {רקע-תמונה: url ('small-heart.jpg'), url ('background.jpg')}

חזור על רקע

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

הערכים האפשריים הם:

• חזור- התמונה חוזרת בצורה אופקית וגם אנכית
• no-repeat - התמונה אינה חוזרת
• repeat-x - התמונה חוזרת אופקית
• repeat-y - התמונה חוזרת על עצמה אנכית
• רווח- התמונה חוזרת על עצמה עם רווחים או פערים אחידים.
• עגול - התמונה חוזרת על עצמה כדי למלא את האזור ללא פערים ביניהם.

התחביר של CSS עבור המאפיין רקע-חזרה הוא:

חזור על רקע: חזור | חזור- x | חזור- y | לא חוזר | רווח | עגול

גוף {רקע-תמונה: url ('heart.png'), url ('background.png') רקע-repeat: repeat-y, repeat-x צבע רקע: #ffffff}

מצורף רקע

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

הערכים האפשריים הם:

• גלילה - התמונה גוללת יחד עם הדף.
• קבוע - התמונה לא תגלול יחד עם הדף

התחביר של CSS עבור הקובץ המצורף הוא:

מצורף רקע: גלילה | קבוע

גוף {רקע-תמונה: url ('heart.png'), url ('background.png') רקע-חזרה: רווח, עגול}

מיקום רקע

ה עמדת רקע המאפיין משמש לציון המיקום או המיקום של תמונת רקע. הערכים האפשריים הם:

• חלק עליון
• ימין
• תַחתִית
• שמאלה
• מֶרְכָּז
• שילוב של ערכים אלה (למשל, למעלה משמאל)

התחביר של CSS למיקום הרקע הוא:

עמדת רקע: למעלה | ימין | שמאל | תחתון | מרכז

גוף {רקע-תמונה: url ('heart.png') רקע-חזרה: אין-חוזר רקע-מצורף: גלילה}

תמונת רקע בגודל CSS

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

ניתן להשתמש בערכים הבאים בגודל רקע:

• אוטומטי
• אורך-גובה ורוחב של תמונה למשל 20 פיקסלים 40 פיקסלים.
• אחוז- גובה ורוחב התמונה באחוז אלמנט אב w.r.t למשל 50% 50%.
• מרכז- יישר את התמונה למרכז
• כיסוי, שינוי גודל התמונה לכיסוי מלא לפי אזור הרקע.
• להכיל, לשנות את קנה המידה של התמונה כך שתתאים עד לגובהה ורוחבה בפועל.

התחביר של CSS למיקום הרקע הוא:

גודל רקע: ערך

גוף {רקע-תמונה: url ('heart.png'), url ('background.png') רקע-חזרה: ללא חזרה, גודל רקע חוזר: 400 פיקסלים 150 פיקסלים, כריכה}

גוף {רקע-תמונה: url ('heart.png'), url ('background.png') רקע-חזרה: אין חזרה, גודל רקע חוזר: מכיל, 400 פיקסלים 150 פיקסלים}

צבע רקע

זה הפשוט ביותר מכל המאפיינים ב- CSS. הוא מחיל צבעים אחידים על רקע הדף. ניתן לציין את הערך של מאפיין זה בצבעים (למשל אדום, כחול וכו '), ערך hex וערך RGB.

התחביר של CSS עבור צבע הרקע הוא:

צבע רקע: ערך

גוף {רקע-תמונה: url (small-heart.jpg) רקע-צבע: # 22a8e3}

קו g + goto

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

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

בדוק את שלנו שמגיע עם הדרכה חיה בהנחיית מדריך וניסיון פרויקט אמיתי. הכשרה זו גורמת לך להיות בקיאים במיומנויות לעבוד עם טכנולוגיות אינטרנט מקדימות וקדמיות. הוא כולל הדרכה בנושא פיתוח אתרים, jQuery, Angular, NodeJS, ExpressJS ו- MongoDB.

יש לך שאלה עבורנו? אנא הזכיר זאת בקטע ההערות בבלוג 'תמונת רקע ב- CSS' ונחזור אליך.