התכונה background-origin בשפת CSS3

ב - CSS2 תמונת רקע (background image) ממוקמת ביחס לגבול ריפוד (padding) האלמנט שבתוכו נרצה למקם תמונת רקע. כך למשל, אם נרצה למקם תמונת רקע בקצה הימני העליון של אלמנט כלשהו התמונה לא תתמקם ביחס לגבול (border) האלמנט אלא ביחס ל - padding של האלמנט. בדוגמת הקוד הבאה נגדיר כי ברצוננו למקם את התמונה בקצה הימני העליון של האלמנט:

element {background-image:url('img.gif');
background-repeat:no-repeat;
background-position:right top;
}

התמונה הבאה ממחישה את הקוד שלנו באופן הטוב ביותר:

css2 backgroung image example

באיור המלבן האדום המייצג את תמונת הרקע. האזור הירוק מייצג את הריפוד (padding) של האלמנט. ביכולתכם לראות כי המלבן האדום ממוקם בקצה הימני העליון של התחום הירוק. כלומר התמונה התמקמה בקצה הימני העליון של האלמנט בהתייחס לאזור הריפוד שלו ולא לאזורים האחרים כגון ה - border או ה - content.

שליטה על מיקום תמונת רקע בעזרת התכונה background-origin

כאמור ב - CSS2 התכונה background-position מתייחסת באזור ה - padding לצורך חישוב מיקום תמונת הרקע. לעומת זאת ב - CSS3 התכונה background-origin מאפשרת לשלוט באזור ההתייחסות לצורך חישוב המיקום. הצורה הכללית של התכונה היא כדלקמן:

element { background-origin: מילת מפתח;}

מילת המפתח יכולה להיות אחת משלוש והקוד המלא ייראה כך:

  1. border-box כאשר נרצה שתמונת הרקע שלנו תמוקם בהתייחס לאזור הגבול (border) של האלמנט;
    -moz-background-origin: border;
    -webkit-background-origin: border;
    -webkit-background-origin: border-box;
    background-origin: border-box;
    background-position:right top;
  2. padding-box כאשר נרצה שתמונת הרקע שלנו תמוקם בהתייחס לאזור הריפוד (padding) של האלמנט ;
    -moz-background-origin: padding; -moz-background-origin: padding;
    -webkit-background-origin: padding;
    -webkit-background-origin: padding-box;
    background-origin: padding-box;
    background-position:right top;
  3. content-box כאשר נרצה שתמונת הרקע שלנו תמוקם בהתייחס לאזור התוכן (content) של האלמנט:
    -moz-background-origin: content;
    -webkit-background-origin: content;
    -webkit-background-origin: content-box;
    background-origin: content-box;
    background-position:right top;

המחשת ההבדלים בין border-box, padding-box ו - content-box

css2 backgroung image example

כפי שהאיור ממחיש תמונת הרקע (המלבן האדום) משנה את מיקומה ואת אזור הייחוס שלה על פי מילת המפתח שהוגדרה לתכונה background-origin. עבור כל אחד מהאלמנטים הגדרנו: background-position: right top אולם בגלל ששינינו את נקודת הייחוס שעל פיה הדפדפן ממקם את תמונת הרקע, מיקומה של התמונה השתנה.

 


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