יצירת שקיפויות צבע בעזרת התכונה opacity

כפי שראינו במדריכים הקודמים בפרק זה צבעים מסוג HSLA ו – RGBA מכילים ערך נוסף שבעזרתו ניתן לקבוע את מידת האטימות של הצבע. בלי שום קשר לכך התווספה ל – CSS3 תכונה חדשה: opacity, שבאמצעותה ניתן לקבוע את מידת האטימות גם של צבעים מסוג RGB למשל שאין להם פרמטר שקיפות מובנה. 

תחביר התכונה opacity

Element { opacity: ערך מספרי; }

הערך המספרי שהתכונה opacity יכולה לקבל נע בין 0 ל - 1 והוא ערך עשרוני. ככל שהערך קרוב יותר ל - 0 כך הוא שקוף יותר וככל שהערך קרוב יותר ל - 1 כך הוא אטום יותר.

דוגמאות קוד לשימוש בתכונה opacity

בדוגמה הבאה נגדיר רמת שקיפות שונה לשלושה אלמנטים בעלי צבע RGB זהה ונראה כיצד רמת השקיפות משפיע על ניראות הצבע.

#E1 { background-color: black; opacity: 0.33}
#E2 { background-color: black; opacity: 0.66}
#E3 { background-color: black; opacity: 0.99}


CSS3 Opacity Example

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