אם אתה עיצוב אתר, ייתכן שתהיה מעוניין ללמוד כיצד ליצור תמונת רקע קבועה או סימן מים בדף אינטרנט. זהו טיפול עיצובי נפוץ הפופולרי ברשת די הרבה זמן. זה אפקט שימושי שיש בתיק הטריקים שלך לעיצוב אתרים.
אם לא עשית זאת בעבר או שניסית זאת בעבר ללא מזל, התהליך אולי נראה מאיים, אך למעשה זה לא קשה במיוחד. בעזרת הדרכה קצרה זו, תקבל את המידע הדרוש לך בכדי ללמוד את הטכניקה תוך מספר דקות באמצעות CSS.
מתחילים
לתמונות רקע או סימני מים (שהם באמת רק תמונות רקע בהירות מאוד) יש היסטוריה בעיצוב מודפס. המסמכים כללו זה מכבר סימני מים עליהם כדי למנוע העתקתם. בנוסף, עלונים וברושורים רבים משתמשים בתמונות רקע גדולות כחלק מעיצוב היצירה המודפסת. עיצוב אתרים השאיל זמן רב סגנונות מהדפס ותמונות רקע הם אחד מהסגנונות המושאלים הללו.
קל ליצור תמונות רקע גדולות אלה באמצעות השלוש הבא סגנון CSS נכסים:
- תמונת רקע
- חזור על רקע
- מצורף רקע
- גודל רקע
תמונת רקע
תשתמש בתמונת רקע כדי להגדיר את התמונה שתשמש כסימן המים שלך. סגנון זה פשוט משתמש בנתיב קבצים כדי לטעון תמונה שיש לך באתר שלך, ככל הנראה בספריה בשם תמונות.
תמונת רקע: url (/images/page-background.jpg);
חשוב שהתמונה עצמה תהיה בהירה יותר או שקופה יותר מתמונה רגילה. זה ייצור את זה "סימן מים"מראה שבו תמונה שקופה למחצה מסתתרת מאחורי הטקסט, הגרפיקה ואלמנטים עיקריים אחרים של דף האינטרנט. ללא שלב זה תמונת הרקע תתחרה במידע שבעמודך ותקשה על הקריאה.
אתה יכול להתאים את תמונת הרקע בכל תוכנית עריכה כגון אדוב פוטושופ.
רקע-חזור
המאפיין חוזר על רקע הבא. אם אתה רוצה שהתמונה שלך תהיה גרפיקה גדולה בסגנון מים, היית משתמש במאפיין זה כדי להציג את התמונה פעם אחת בלבד.
רקע-חזרה: אין לחזור;
בלי ה לא לחזור מאפיין, ברירת המחדל היא שהתמונה תחזור שוב ושוב על הדף. זה לא רצוי ברוב העיצובים המודרניים של דפי האינטרנט, ולכן יש להחשיב סגנון זה כחיוני ב- CSS שלך.
מצורף רקע
מצורף רקע הוא מאפיין שמעצבי אתרים רבים שוכחים ממנו. השימוש בו שומר על תמונת הרקע שלך קבועה במקום כאשר אתה משתמש ב- תוקן תכונה. זה מה שהופך את התמונה לסימן מים הקבוע בדף.
ערך ברירת המחדל של מאפיין זה הוא גְלִילָה. אם לא תציין ערך מצורף לרקע, הרקע יגלול יחד עם שאר הדף.
מצורף רקע: קבוע;
גודל רקע
גודל הרקע הוא מאפיין CSS חדש יותר. זה מאפשר לך להגדיר את גודל הרקע על סמך נמל התצוגה בו הוא נצפה. זה מאוד מועיל עבור אתרים רספונסיביים שיוצגו בגדלים שונים במכשירים שונים.
גודל רקע: כריכה;
שני ערכים מועילים שתוכלו להשתמש בהם עבור מאפיין זה כוללים:
- כיסוי - משקל את הרקע כך שמוצג הרוחב המלא או הגובה המלא. המשמעות היא שחלקים מסוימים של התמונה עשויים שלא להופיע על המסך אלא שהאזור כולו יכוסה.
- לְהַכִיל - קנה המידה של התמונה כך שהרוחב והגובה כולו מוצגים באזור המעוצב. התמונה אינה מנותקת, אך החיסרון הוא שחלקים מהאזור עשויים שלא להיות מכוסים על ידי התמונה.
הוספת ה- CSS לדף שלך
לאחר שתבין את המאפיינים שלעיל ואת הערכים שלהם, תוכל להוסיף סגנונות אלה לאתר שלך.
הוסף את הדברים הבאים לכותרת HEAD של דף האינטרנט שלך אם אתה מייצר אתר עם עמוד יחיד. הוסף אותו לסגנונות CSS של גיליון סגנונות חיצוני אם אתה בונה אתר מרובה עמודים וברצונך לנצל את כוחו של גיליון חיצוני.
שנה את כתובת ה- URL של תמונת הרקע שלך כך שתתאים לשם הקובץ הספציפי ונתיב הקובץ הרלוונטי לאתר שלך. בצע שינויים מתאימים אחרים שיתאימו גם לעיצוב שלך ויהיה לך סימן מים.
אתה יכול גם לציין מיקום
אם ברצונך למקם את סימן המים במיקום מסוים בדף האינטרנט שלך, תוכל לעשות זאת גם כן. לדוגמה, ייתכן שתרצה את סימן המים באמצע העמוד או אולי בפינה התחתונה, בניגוד לפינה העליונה, שהיא ברירת המחדל.
לשם כך, הוסף את המאפיין מיקום הרקע לסגנון שלך. פעולה זו תמקם את התמונה במקום המדויק שתרצה שתופיע. באפשרותך להשתמש בערכי פיקסל, אחוזים או יישור כדי להשיג אפקט מיקום זה.
עמדת רקע: מרכז;