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

• אַפּרִיל 30, 2024

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

אבן הבניין הבסיסית לתמונת הרקע שלך היא, כראוי, נכס 'תמונת רקע'. אתה משתמש במאפיין זה כדי לומר לאתר שלך היכן ממוקם קובץ התמונה, באופן הבא:

גוף {
תמונת רקע: url ("image.gif");
}

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

גוף {
תמונת רקע: url ("image.gif");
מיקום ברקע: מרכז עליון;
}

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

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

גוף {
תמונת רקע: url ("image.gif");
מיקום ברקע: מרכז עליון;
רקע-חוזר: חזרה-y;
}

הגדרת הערך ל- 'חוזר על y' אומרת לדפדפן לרצף את תמונת הרקע לאורך ציר ה- Y, ​​aka אנכית, אך לא את ציר ה- x (אופקית), וזה בדיוק מה שרצינו. אם רצית לרצף אותו בצורה אופקית אך לא אנכית, היית משתמש בערך 'חזרה-x' במקום זאת; אם לא רצית שהתמונה תשובץ בכלל, תן לה את הערך 'לא חוזר'. ערך ברירת המחדל הוא לרצף את התמונה הן אופקית והן אנכית, כך שאם זו הבחירה הטובה ביותר עבור התמונה שלך, אינך צריך להגדיר את המאפיין 'חזרה על רקע' בכלל.

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

גוף {
תמונת רקע: url ("image.gif");
מיקום ברקע: מרכז עליון;
רקע-חוזר: חוזר-y;
קובץ מצורף לרקע: קבוע;
}


אם אתה רוצה לשמור על כללי CSS שלך קטנים ככל האפשר, אתה יכול לשלב את כל ערכי הרקע שלך לשורה אחת על ידי שימוש במאפיין 'רקע', כך:

רקע כללי {
url ("image.gif") חוזר על החלק המרכזי הקבוע;
}

בעת השימוש במאפיין 'רקע' עליכם לרשום את הערכים בסדר ספציפי:
[צבע רקע (אם משתמשים)] [תמונת רקע] [חזרה על רקע] [קובץ מצורף רקע] [מיקום רקע]. אתה יכול להשאיר כל ערך שאתה לא צריך, אתה רק צריך לרשום את כל הערכים שאתה משתמש בהם בסדר הנכון או שהכלל לא יעבוד.

הוראות וידאו: html - שיעור 16: תמונת רקע (אַפּרִיל 2024).