خاصية الشفافية opacity

الصياغة

.disabled { opacity: 0.5; pointer-events: none; }
.fade { opacity: 0; transition: opacity 0.3s; }
.fade.show { opacity: 1; }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<style>
  .card { display: inline-block; background: #7c5cff; color: white; padding: 12px 18px; border-radius: 10px; margin: 4px; }
</style>
<div class="card">معتم 1</div>
<div class="card" style="opacity:.6">نصف 0.6</div>
<div class="card" style="opacity:.25">شبح 0.25</div>

أهم القيم

💡 نصائح عملية

• الحركة الناعمة الاقتصادية: opacity + transform فقط — دع المتصفح يسرّعهما
• opacity:0 يبقى قابلًا للضغط! أضف pointer-events:none أو visibility:hidden معه

⚠️ أخطاء شائعة

• استخدامها لخلفية شفافة فيبهت النص معها — المطلوب لون بشفافية
• نسيان أنها تنشئ سياق تراص فتُحبس طبقات الأبناء (لغز z-index الخفي)

خصائص ذات صلة