בצע את הטכניקה עם CSS
אם אתה מעצב אתר אינטרנט, ייתכן שאתה מעוניין ללמוד כיצד ליצור תמונת רקע קבועה או סימן מים בדף אינטרנט. זהו טיפול עיצוב נפוץ כי כבר פופולרי באינטרנט במשך זמן מה למדי. זהו האפקט שימושי יש בתיק עיצוב האינטרנט שלך של טריקים.
אם לא עשית את זה קודם או ניסית את זה בעבר ללא הצלחה, התהליך עשוי להיראות מפחיד, אבל זה ממש לא קשה מאוד בכלל. עם הדרכה קצרה זו, תקבל את המידע הדרוש לך כדי להשתלט על הטכניקה תוך דקות באמצעות CSS.
מתחילים
תמונות רקע או סימני מים (שהם באמת רק תמונות רקע קלות מאוד) יש היסטוריה בעיצוב מודפס. מסמכים כללו לאורך זמן סימני מים עליהם כדי למנוע העתקה. בנוסף, פליירים רבים וחוברות להשתמש בתמונות רקע גדול כחלק העיצוב עבור פיסת מודפס. עיצוב אתרים יש לשאול סגנונות ארוכים מן ההדפסה תמונות רקע הם אחד מאותם סגנונות שאול.
תמונות רקע גדולות אלה קלות ליצור באמצעות שלושת המאפיינים הבאים של סגנון CSS :
- תמונת רקע
- רקע לחזור
- רקע-קובץ מצורף
- גודל הרקע
תמונת רקע
תשתמש בתמונת רקע כדי להגדיר את התמונה שתשמש כסימן המים שלך. סגנון זה פשוט משתמש בנתיב קובץ לטעינת תמונה שיש לך באתר שלך, ככל הנראה בספריה בשם "תמונות".
background-image: url (/images/page-background.jpg);
חשוב שהתמונה עצמה תהיה בהירה או שקופה יותר מתמונה רגילה. פעולה זו תיצור את המראה "סימן מים" שבו תמונה שקופה למחצה נמצאת מאחורי הטקסט, הגרפיקה והרכיבים העיקריים האחרים בדף האינטרנט. ללא צעד זה, תמונת הרקע תתמודד עם המידע בדף שלך ותקשה על הקריאה.
ניתן לשנות את תמונת הרקע בכל תוכנית עריכה כגון Adobe Photoshop.
רקע - חזור
המאפיין חזרה על הרקע מגיע הבא. אם ברצונך שהתמונה תהיה גרפית גדולה בסגנון סימן מים, תשתמש בנכס זה כדי להציג תמונה זו פעם אחת בלבד.
רקע לחזור: לא לחזור;
ללא המאפיין "ללא חזרה", ברירת המחדל היא שהתמונה תחזור על עצמה שוב ושוב בדף. זה לא רצוי ביותר בעיצובים דף אינטרנט מודרני, אז זה סגנון צריך להיחשב חיוני CSS שלך.
רקע - קובץ מצורף
רקע-קובץ מצורף הוא נכס שמעצבי אתרים רבים שוכחים ממנו. באמצעות זה שומר את תמונת הרקע שלך קבוע במקום כאשר אתה משתמש "קבוע" רכוש. זה מה הופך את התמונה לתוך סימן מים זה קבוע על הדף.
ערך ברירת המחדל עבור מאפיין זה הוא "גלול". אם לא תציין ערך רקע-קובץ מצורף, הרקע ידפדף יחד עם שאר הדף.
background-attachment: fixed;
גודל רקע
גודל הרקע הוא מאפיין CSS חדש יותר. זה מאפשר לך להגדיר את גודל הרקע מבוסס על viewport זה להיות שנצפו פנימה זה מאוד מועיל עבור אתרי אינטרנט תגובה שיוצגו בגדלים שונים על מכשירים שונים .
background-size: כריכה;
שני ערכים מועילים שבהם תוכל להשתמש עבור נכס זה כוללים:
- כריכה - שינוי קנה המידה של הרקע כך שהרוחב המלא או הגובה המלא יוצגו. פירוש הדבר שחלקים מסוימים של התמונה עשויים שלא להופיע על המסך, אך כל האזור יהיה מכוסה.
- מכיל - שינוי קנה המידה של התמונה כך שכל רוחב וגובה מוצגים באזור המתויג. התמונה אינה מנותקת, אבל החיסרון הוא כי חלקים של האזור לא יכול להיות מכוסה על ידי התמונה.
הוספת CSS לדף שלך
לאחר שתבין את התכונות הנ"ל ואת הערכים שלהם, אתה יכול להוסיף סגנונות אלה לאתר האינטרנט שלך.
הוסף את הדף הבא ל HEAD של דף האינטרנט שלך אם אתה יוצר דף יחיד. הוסף אותו לסגנונות CSS של גיליון סגנונות חיצוני אם אתה בונה אתר מרובה עמודים וברצונך לנצל את העוצמה של גיליון חיצוני.