נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

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

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

תכונות רקע חדשות שמציע CSS3

מחבר:
בתאריך:

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

הקובץ שבו אני משתמש בתור רקע הוא תמונה שגודלה המקורי 600x 1200 פיקסלים, והתמונה שאמקם מעל היא בעלת רקע שקוף וגודלה המקורי 120x 220 פיקסלים.

התמונות המקוריות נראות כך:

התמונה שתשמש רקע

התמונה שנמקם מעל באמצעות CSS3

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

התוצאה של תכונת שתי תמונות הרקע מוצגות אחת מעל לשנייה background

 

מהו קוד ה-CSS שמאפשר להציג מספר תמונות רקע?

קוד ה-css שמאפשר להציג מספר תמונות רקע הוא:

#background_id {
  background-image: url(css3_star.png), url(background.png);
  background-position: top left, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 220px 120px, 1200px 600px;
  width: 1200px;
  height: 600px;
}

 

בשורה הראשונה background-image אפשר למצוא את המקור לשתי התמונות, כשביניהן פסיק. זה נראה כך:

background-image: url(css3_star.png), url(background.png);

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

background-position מאפשר למקם את התמונות, והוא יכול לקבל 2 ערכים לפי הפירוט הבא:

background-position: x y;

כש-x מזיז את האלמנט לרוחב המסך, ו-y לגובהו של המסך. בהתאם, הערך של x יכול להיות right|center|left, והערך של y יכול להיות top|center|bottom. לדוגמה, כדי למקם אלמנט בפינה הימנית התחתונה, נשתמש בקוד הבא:

background-position: right bottom;

כדי למקם אלמנטים באופן מדויק יותר, ניתן להשתמש באחוזים כאשר 0% 0% ימקם את האלמנט בפינה השמאלית העליונה, 100% 100% בפינה הימנית התחתונה, 50% 50% במרכז שני הצירים, וכן הלאה.

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

background-position: right 10px bottom 20px;

קוד זה יגרום למיקום הרקע 10 פיקסלים מימין ו-20 פיקסלים מתחתית האלמנט המכיל.

background-repeat מאפשר לקבוע חזרה על התמונות בציר ה-X או בציר ה-Y, או למנוע חזרה על התמונות. הערכים המשמשים לכך הם: repeat-x, repeat-y ו no-repeat.

background-size קובע את ממדי התמונות. כל תמונה מטופלת בנפרד. תכונה זו יכולה לקבל ערכים בפיקסלים ובאחוזים. הערך הימני מתייחס לציר ה-x והערך השמאלי מתייחס לציר ה-y. בדוגמה זו ראינו שימוש בפיקסלים אבל השימוש באחוזים יכול להתאים יותר להצגה במסכים בגדלים שונים . לדוגמה: אם נקבע את הערך על 100% התמונה תמלא את כל המסך בכל סוגי המסכים, ממכשירים ניידים ועד למסכים גדולים שמיועדים למחשבים שולחניים. הקוד נראה כך:

background-size: 100% 100% ;

width ו-height קובעים את ממדיה של התמונה הגדולה ביותר.

 

תאימות לדפדפנים

הקוד מיועד לכל הדפדפנים המודרניים כולל IE9, וכמו כן ל- Firefox, Chrome, Safari ו-Opera.

 

הוסף תגובה חדשה

 

= 3 + 3