ריבוי תמונות רקע - Multiple backgrounds

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

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

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

Element {background-image: url(img1.jpg), url(img2.jpg);}

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

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

דוגמה להגדרת מיקום תמונות רקע מרובות

Element {background-position: Top bottom, right top;}

דוגמה להגדרת צורת החזרה של תמונות רקע מרובות

Element {background-repeat: no-repeat, repeat-x; }

ובסה"כ ייראה הקוד המשותף כך:

Element {background-image: url(img1.jpg), url(img2.jpg);
background-position: Top bottom, right top;
background-repeat: no-repeat, repeat-x; }

את אותו הקוד בדיוק ביכולתנו לכתוב בקוד מקוצר שייראה כך:

Element {background: url(img1.jpg) top bottom no-repeat, url(img2.jpg) right top repeat-x; }

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

 

 

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש