خاصية opacity في CSS تُستخدم للتحكم في شفافية عنصر HTML بأكمله، بما في ذلك محتواه (النص، الصور، الخلفية، إلخ). تُحدد هذه الخاصية درجة العتامة أو الشفافية للعنصر، حيث:

  • 1 (أو 100%): يعني أن العنصر معتم تمامًا وغير شفاف.
  • 0 (أو 0%): يعني أن العنصر شفاف تمامًا وغير مرئي.
  • قيمة بين 0 و 1: تُحدد درجة الشفافية بين العتامة الكاملة والشفافية الكاملة. على سبيل المثال، 0.5 تعني أن العنصر نصف شفاف.

كيفية استخدام opacity:

تُستخدم خاصية opacity كالتالي:

CSS
selector {
  opacity: value;
}

حيث selector هو مُحدد CSS الذي يستهدف العنصر المراد تغيير شفافيته، و value هي القيمة التي تُحدد درجة الشفافية (رقم بين 0 و 1).

أمثلة:

  • جعل عنصر شفاف بنسبة 50%:
CSS
.element {
  opacity: 0.5;
}
CSS
img {
  opacity: 0.7;
}
  • تغيير شفافية عنصر عند تمرير الماوس فوقه (باستخدام :hover):
CSS
.element:hover {
  opacity: 0.8;
}

ملاحظات هامة:

  • وراثة الشفافية: يرث العناصر الأبناء قيمة opacity من آبائهم. هذا يعني أنه إذا قمت بتعيين opacity لعنصر أب، فستؤثر هذه القيمة على جميع العناصر الموجودة بداخله.
  • التأثير على التفاعلية: عندما تُعيّن opacity لعنصر بقيمة أقل من 1، يصبح العنصر شبه شفاف بصريًا، ولكنه يظل يشغل مساحته في الصفحة. هذا يعني أنه يُمكنك النقر فوق عنصر شبه شفاف، حتى لو كان بالكاد مرئيًا.
  • البدائل: في بعض الحالات، قد تحتاج إلى التحكم في شفافية لون الخلفية فقط دون التأثير على محتوى العنصر. في هذه الحالة، يُمكنك استخدام قيم rgba أو hsla للألوان، حيث يُحدد الحرف "a" (alpha) قيمة الشفافية. على سبيل المثال:
  • جرب الان
CSS
.element {
  background-color: rgba(255, 0, 0, 0.5); /* خلفية حمراء نصف شفافة */
}

متى نستخدم opacity؟

  • إنشاء تأثيرات تلاشي: يُمكن استخدام opacity لإنشاء تأثيرات تلاشي العناصر عند التمرير عليها أو عند ظهورها واختفائها.
  • إضافة لمسة جمالية: يُمكن استخدام opacity لإضافة لمسة جمالية للصفحة عن طريق جعل بعض العناصر شبه شفافة.
  • التحكم في ظهور العناصر بشكل تدريجي: يُمكن استخدام opacity مع JavaScript للتحكم في ظهور العناصر بشكل تدريجي (fade in) أو اختفائها بشكل تدريجي (fade out).

باختصار، خاصية opacity أداة قوية للتحكم في شفافية العناصر في CSS، وتُستخدم بشكل واسع لإنشاء تأثيرات بصرية جذابة.