התכונה background-clip ב - CSS3

התכונה background-clip ב - CSS3 מאפשרת לקבוע האם תמונת הרקע תגלוש לגבול (border) אלמנט או שהיא תוגבל לריפוד (padding) האלמנט או אף לתוכנו (content).

הצורה הכללית לשימוש בתכונה background-clip

Element { background-clip: מילת מפתח; }

מילות המפתח האפשריות הן: border-box, padding-box ו - content-box.

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

-moz-background-clip: padding;
-webkit-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;

דוגמאות קוד לשימוש בתכונה background-clip

בדוגמה הבאה נגדיר עבור האלמנט <body> כי תמונת הרקע שלו תמלא את כולו ותגלוש לתוך ה - border שלו:

body {background-image:url('gradient.jpg');
background-repeat:repeat-x;
background-clip: border-box;

נמחיש את משמעות הקוד שלמעלה בעזרת האיור הבא:

border-box demo

כפי שביכולתכם לראות תמונת הרקע שלנו (gradient.jpg) ממלאת את כל שטח האלמנט (body) כולל אזורי הגבול, הריפוד והתוכן.

בדוגמה הבאה נגדיר עבור האלמנט <body> כי תמונת הרקע שלו  תמלא את כולו ותגלוש לתוך ה - padding שלו:

body {background-image:url('gradient.jpg');
background-repeat:repeat-x;
background-clip: padding-box;

נמחיש את משמעות הקוד שלמעלה בעזרת האיור הבא:


כפי שביכולתכם לראות תמונת הרקע שלנו (gradient.jpg) ממלאת את שטח ה - padding וה - content של האלמנט אך לא את אזור ה - border שלו.


בדוגמה הבאה נגדיר עבור האלמנט <body> כי תמונת הרקע שלו תמלא רק את ה - content שלו:

body {background-image:url('gradient.jpg');
background-repeat:repeat-x;
background-clip: content-box;

נמחיש את משמעות הקוד שלמעלה בעזרת האיור הבא:


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


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