خاصية التعتيم
آخر تحديث: 2026-09-13
opacity خاصية التعتيم
تحدد الخاصية opacity الشفافية العامة للعنصر، بقيم تتراوح من 0 إلى 1. 0 شفاف تماماً و1 معتم تماماً. على عكس خلفية شفافة، تؤثر opacity في العنصر وكل محتواه، مما يجعلها شائعة لتأثيرات الظهور/الاختفاء التدريجي والتدرّج البصري.
| الفئة | |
|---|---|
| القيمة الأولية | 1 |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | number |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
opacity: <number [0,1]>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<number [0,1]> | النوع | 0 شفاف تماماً، 1 معتم تماماً |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| opacity | ✓ v25 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v15 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： تؤثر opacity في العنصر بأكمله بما في ذلك عناصره الفرعية؛ ولجعل الخلفية وحدها شفافة، استخدم ألوان rgba أو hsla بدلاً من ذلك.
تلميح： تُعد opacity خاصية قابلة للانتقال، وتُستخدم غالباً لإنشاء أنيميشن للظهور والاختفاء التدريجي.
❓ الأسئلة الشائعة
Qما الفرق بين شفافية opacity وشفافية rgba؟
Aتُطبَّق opacity على العنصر بأكمله، فتجعل الخلفية والنص والحدود وكل العناصر الفرعية شفافة معاً، وتنشئ سياق تراص جديداً. أما rgba() فتؤثر فقط في قناة الألفا للخاصية الواحدة التي تحددها (مثل لون الخلفية)، تاركة النص والعناصر الفرعية معتمة. استخدم rgba() عندما تريد خلفية شبه شفافة مع نص واضح، وopacity عندما تريد تلاشي العنصر بالكامل.
Qما الفرق بين opacity: 0 وdisplay: none؟
Aمع opacity: 0 يظل العنصر يشغل مساحة ويبقى قابلاً للنقر ويمكن أن يشارك في الانتقالات، ولا يزال بإمكان قارئات الشاشة قراءة محتواه. أما مع display: none فتتم إزالة العنصر من تدفق المستند بالكامل — بلا مساحة ولا تفاعل ولا محتوى قابل للقراءة. يجب أن تستخدم أنيميشن التلاشي opacity؛ واستخدم display: none فقط عندما تريد إزالة العنصر تماماً.
Qما الفرق بين opacity: 0 وvisibility: hidden؟
Aكلاهما يجعل العنصر غير مرئي وغير قابل للنقر، لكن opacity: 0 تحفظ المساحة وتبقى قابلة للقراءة بقارئات الشاشة وتدعم الانتقالات السلسة. أما visibility: hidden فتحفظ مساحة التخطيط لكنها تخفي المحتوى أيضاً عن التقنيات المساعدة ولا يمكن تحريكها بسلاسة. استخدم opacity للأنيميشن وvisibility: hidden للإخفاء البسيط.
Qلماذا أنيميشن opacity أكثر سلاسة؟
Aتُعد opacity خاصية تركيب: يدمجها المتصفح على مسار التركيب دون إطلاق تخطيط أو رسم، لذا تصل بسهولة إلى 60fps. في المقابل، يؤدي تعديل top أو left إلى إعادة التدفق وإعادة الرسم. تتناسب تأثيرات الظهور/الاختفاء التدريجي والكشف عند التمرير جيداً مع opacity وtransition. لاحظ أن opacity تنشئ سياق تراص قد يؤثر في كيفية تراص العناصر fixed.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
