opacity

شرح خاصية css opacity

خاصية opacity هي خاصية في CSS تحدد شفافية عنصر HTML. تتحكم هذه الخاصية في درجة شفافية العنصر، حيث يتم تحديد القيمة بين 0 و 1، حيث 0 يعني تمامًا شفاف و 1 يعني غير شفاف.

يتم استخدام خاصية opacity لتحديد شفافية عنصر HTML وإضفاء مظهر مختلف على العنصر. يمكن استخدامها لإنشاء تأثيرات غامقة أو شفافة للعناصر النصية والصور والخلفيات.

يمكن تحديد خاصية opacity باستخدام CSS، على سبيل المثال:

/* تحديد شفافية العنصر إلى 50٪ */
.item {
  opacity: 0.5;
}

/* تحديد شفافية العنصر إلى 25٪ */
.item {
  opacity: 0.25;
}

/* تحديد العنصر تمامًا شفاف */
.item {
  opacity: 0;
}

/* تحديد العنصر غير شفاف */
.item {
  opacity: 1;
}

يمكن استخدام خاصية opacity مع خاصية rgba() لتحديد شفافية لون الخلفية. على سبيل المثال:

/* تحديد شفافية الخلفية إلى 50٪ */
.item {
  background-color: rgba(0, 0, 0, 0.5);
}

/* تحديد شفافية الخلفية إلى 25٪ */
.item {
  background-color: rgba(0, 0, 0, 0.25);
}

تستخدم خاصية opacity على نطاق واسع في تصميم الواجهات الأمامية لتحسين جاذبية المظهر العام للصفحة. ومع ذلك، يجب استخدام الخاصية بحذر لأنها يمكن أن تؤثر على قراءة النصوص ورؤيتها بشكل صحيح.

اختبار css opacity

اضغط على start التي في منتصف الاختبار لبدء الاختبار