המדריך לעיצוב וטיפול בתמונות בשפת CSS

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

שקיפות ואטימות של תמונות

CSS מאפשר לנו לקבוע מה תהיה מידת השקיפות, או אם תרצו האטימות, של תמונות בדף ה - HTML שלנו. קוד ה - CSS הרשמי לקביעת אטימות / שקיפות תמונה עושה שימוש בתכונה Opacity. הצרה היא שלמרות שכל הדפדפנים תומכים בדרך זו אחרת בשליטה על שקיפות ואטימות תמונות לא כולם תומכים בתכונה Opacity כפי שנקבע בסטנדרטים של CSS. לכן, כדי לתמוך בכל הדפדפנים הגדולים עלינו לרשום קוד CSS שונה עבור כל אחד מן הדפדפנים, כפי שניתן ללמוד מדוגמת הקוד הבאה:

זהו הקוד הסטנדרטי התומך בגרסאות מתקדמות של רוב הדפדפנים כולל כרום
opacity:0.5;
קוד זה תומך בגרסאות שונות של אינטרנט אקספלורר
filter:alpha(opacity=40);

   


יצירת רקע באמצעות תמונה

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

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


דוגמה לשימוש בתמונה לצורך קביעת תמונת הרקע של דף שלם
body {background-image:url('star.gif');

   

הצגה חוזרת של תמונת רקע (Image Reapeat)

כפי שראינו בדוגמה למעלה אם איננו מגדירים לו אחרת הדפדפן חוזר על תמונת הרקע הן משמאל לימין והן מלמעלה למטה. אולם שפת CSS מאפשרת לנו לשלוט גם בכך ולקבוע כיצד תחזור התמונה על עצמה. כדי לשלוט בדרך חזרת התמונה על עצמה נשתמש בתכונה: background-repeat.

התכונה Background-repeat יכולה לקבל את הערכים הבאים: repeat, repeat-x, repeat-y, norepeat. הערכים שאותם נדגים יהיו: repeat-x ו - repeat-y שבאמצעותם נקבע האם התמונה תחזור על עצמה לאורך ציר ה - X או לאורך ציר ה - Y. כלומר האם התמונה תחזור על עצמה משמאל לימין או מלמעלה למטה.

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


דוגמה לשימוש בתמונה בפריסה משמאל לימין כדי ליצור רקע
body {background-image:url('gradient.jpg');
background-repeat:repeat-x;

   

כפי שניתן לראות התמונה בנויה כך שהיא משתלבת עם הדף בצורה יפה ויוצרת אפקט נאה לעין של צבע הנעלם באורח הדרגתי. אולם מה יקרה אם נבקש שאותה תמונה ממש תחזור על עצמה מלמעלה למטה?

דוגמה לשימוש בתמונה בפריסה מלמעלה למטה כדי ליצור רקע
body {background-image:url('gradient.jpg'); background-repeat:repeat-y;

   

קביעת מיקומה של תמונת רקע

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

ערך הסבר
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
מילים שמורות לקביעת מיקום תמונת הרקע
%x%y ערכי ה - X וה - Y באחוזים של הפינה השמאלית העליונה של תמונת
הרקע. הפינה השמאלית העליונה של האלמנט שבו מוגדרת תמונת
הרקע תהיה בעלת הערכים 0% 0%.
XY ערכי ה - X וה - Y של הפינה השמאלית העליונה של התמונה.
Inherit מגדיר האם האלמנט שבתוכו מגדירים רקע יקבל את הגדרות

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

דוגמה לשימוש במילים שמורות לצורך קביעת מיקום תמונת הרקע
body {background-image:url('comp.gif');
background-repeat:no-repeat;
background-position:right top;}
דוגמה לשימוש בערכי פיקסל לצורך קביעת מיקום תמונת הרקע
body {background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:150 10;}
דוגמה לשימוש בערכים אחוזיים לצורך קביעת מיקומה של תמונת הרקע
body {background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:100% 10%;}

   

נעילה ושחרור של תמונות רקע

התכונה background-attachment מאפשרת לקבוע האם תמונת הרקע תישאר קבועה במקומה או שהיא תנוע כאשר נגלול את דף ה - HTML שלנו. בדוגמה הבאה אראה כיצד לקבע את התמונה במקומה. כדי להתרשם מן הקוד טוב יותר מומלץ ללחוץ על הכפתור "נסו בעצמכם":

דוגמה לקוד שיקבע את תמונת הרקע כך שלא תנוע בגלילה
body {
background-image:url('comp.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

   

אם ברצוננו שבשעת גלילת הדף תמונת הרקע לא תתקבע אלא תיגלל אף היא עם הדף אזי עלינו להחליף את הערך fixed שהתכונה background-image מקבלת בערך: scroll, כפי שמודגם בקטע הקוד הבא:

דוגמה לקוד שאינו מקבע את תמונת הרקע כך שתוכל לנוע עם תנועת הגלילה
body {
background-image:url('comp.gif');
background-repeat:no-repeat;
background-attachment:scroll;
}

   



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