ניקלאו » ארכיון הבלוג » עוד על CSS 3: background-origin ו-background

» ארכיון הבלוג » עוד על CSS 3: background-origin ו-background-clip Niquelao עוד על CSS 3: background-origin ו-background-clip 13 בדצמבר 2009, מאת Rumoroso בהמשך לסקירה של המאפיינים השונים של CSS 3 שישלטו ברקעים שלנו, עכשיו תורם של background-origin ו-background-clip . שני מאפיינים אלה באים לעזור לנו לשלוט גם במקור שלפיו נמקם את תמונות הרקע, וגם באפשרות להציגן מתחת לגבול. background-origin קובע את המקור שממנו מחושבת מיקום הרקע, כלומר, מקור הצירים עבור המאפיין background-position . הערכים האפשריים שלו הם: border-box : מיקום הרקע נקבע ביחס לאזור הכולל את הגבול (בתרגום חופשי זה אומר שאם הגבול אינו רציף, הרקע עשוי להיראות מתחתיו). padding-box : זהו ערך ברירת המחדל וקובע את מיקום הרקע ביחס לאזור הכולל את ה-padding (מקביל למצב הנוכחי ב-CSS 2.1). content-box : הרקע ממוקם ביחס לאזור התוכן. background-clip קובע את האזור שבו יוצג הרקע ומקבל שני ערכים אפשריים: border-box : זהו ערך ברירת המחדל וכולל את הרקע באזור התפוס על ידי הגבול. padding-box : מגביל את האזור שבו יוצג הרקע לזה התפוס על ידי ה-padding והתוכן, כלומר, למרות שמקור הרקע נמצא בגבול, התמונה לא תוצג מתחתיו. ההסבר כמו תמיד, הדרך הטובה ביותר היא להיעזר בדוגמאות בדמות צילומי מסך כדי להסביר את שני המאפיינים. בהן הדמייתי את החלל התפוס על ידי אלמנט (תוך כיבוד מודל הקופסאות), כלומר, גבול (מקווקו אפור עבה), padding (המרווח בין הגבול לקו המקווקו הדק) ותוכן (התחום על ידי הקו המקווקו). נתחיל: מה ההבדל בין צמד התמונות הבא? ברור למדי שההבדל בין השתיים הוא שבאחת הרקע מוצג מתחת לגבול, בעוד שבאחרת לא. ה-CSS של הראשונה הוא: background-origin: border-box; background-clip: border-box; …ולשנייה: background-origin: border-box; background-clip: padding-box; ועכשיו, מה ההבדל בין התמונות הבאות? כעת ההבדל הוא במקור הרקע. בראשונה, המקור כולל את הגבול: background-origin: border-box; …בעוד שבשנייה הוא יהיה ב-padding: background-origin: padding-box; ולבסוף, מה ההבדל כעת? : שוב ברור. בתמונה הראשונה, כמו בראשונה בצמד הדוגמאות הקודמות, מקור הרקע הוא אזור הגבול, בעוד שבשנייה המקור הוא אזור התוכן: background-origin: border-box; ו-background-origin: content-box; אם הדפדפן שלכם הוא גרסה עדכנית של Firefox , Chrome , Safari או Konqueror , תוכלו לגשת לעמוד עם דוגמה ליישום שני המאפיינים . אם אתם משתמשים באחר (למשל, Internet Explorer או Opera) גם תוכלו לגשת לדוגמה, אם כי במקרה זה כדי לראות את התוצאה כאשר מאפיינים אלה אינם נתמכים. הערה: Mozilla ו-WebKit תומכים במאפיינים אלה באופן ניסיוני עם התחביר הייחודי שלהם. כפי שכבר הסברתי במאמר אחר, עם CSS 3 נוכל לכלול יותר מתמונת רקע אחת . המאפיינים background-origin ו-background-clip מקבלים ערך עבור כל אחת מהתמונות שבשימוש. לסיום, שוב אעיר משהו לגבי התמונה ששימשה כרקע בדוגמאות. זהו עוגת פירות טעימה שהכינה Dolores ושאותה זכיתי בה בזכות היותי טוב… טוב, שזכיתי בה סתם… בעצם, לא זכיתי בה, אבל נהניתי ממנה כמו ילד עוד על CSS 3: background-origin ו-background-clip קטגוריה: CSS —> תגובה 1 ציוצים שהזכירו את Niquelao » ארכיון הבלוג » עוד על CSS 3: background-origin ו-background-clip — Topsy.com 14 בדצמבר 2009 […] הפוסט הזה הוזכר בטוויטר על ידי Jorge Rumoroso, Juanjo Fernández. Juanjo Fernández אמר: RT @rumoroso: #niquelao עוד על CSS 3: background-origin ו-background-clip http://bit.ly/5wKoQt #CSS3 […] תוכלו לעקוב אחר התגובות הודות לפיד ה-RSS 2.0 . תוכלו גם לשלוח trackback מהאתר שלכם. מאמר קודם: Fish eye menu only with CSS Transform and Transition —> —> —> יצירה זו כפופה לרישיון Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.