מה זה opacity?

המאפיין opacity ב-CSS מגדיר את שקיפות האלמנט. הערך נע בין 0 ל-1, כאשר 0 מייצג שקיפות מלאה (לא רואים את האלמנט) ו-1 מייצג שקיפות מלאה (לא שקוף בכלל).

שימוש במאפיין opacity

באמצעות opacity ניתן ליצור אפקטים של שקיפות, דבר שיכול להוסיף אסתטיקה לעיצוב או לשלב אלמנטים עם רקעים או שכבות אחרות.

דוגמה לשימוש ב-opacity

להלן דוגמה לשימוש במאפיין opacity:

שימושים מתקדמים

באמצעות opacity ניתן ליצור אפקטים מעניינים כמו שכבות שקופות או חפיפות צבעים, ולשלב עם background-color ליצירת אפקטים מיוחדים.

    
          <div style="background-color: blue; width: 200px; height: 100px; opacity: 0.5;">
            שקיפות של 50%
          </div>
          <div style="background-color: red; width: 200px; height: 100px; opacity: 0.2;">
            שקיפות של 20%
          </div>