الشفافية (Opacity) في CSS
تعرف الألوان المصمتة والصور والتدرجات. أحياناً تريد العنصر كله يبدو أنعم — طبقة باهتة، زر معطّل، بطاقة تتراجع. تلك مهمة opacity: كم يبدو الصندوق مصمتاً أو شفافاً.
ماذا تفعل opacity؟
خاصية opacity تضبط مدى عتامة العنصر. القيمة من 1 (مصمت تماماً، الافتراضي لكثير من العناصر) إلى 0 (غير مرئي تماماً). القيم العشرية مثل 0.5 في الوسط. المهم: الشفافية تنطبق على العنصر وكل ما داخله — النص والحدود والخلفيات وصناديق الأبناء تتلاشى معاً.
Opacity مقابل ألفا اللون
يسهل خلطهما. أبقِهما منفصلين.
📊 Opacity مقابل ألفا اللون
| الأداة | ماذا يتلاشى | استخدام شائع |
|---|---|---|
opacity |
العنصر كله (وأبناؤه) | طبقات ناعمة، مظهر معطّل، حركة تلاشي لاحقاً |
ألفا rgba() / hsla() |
طبقة ذلك اللون فقط | خلفيات شفافة مع نص مصمت فوقها |
كلمة transparent |
قيمة لون شفافة تماماً | إخفاء لون حد دون حذف الخاصية |
visibility: hidden |
يخفي بصرياً ويبقي التخطيط | أداة أخرى — لا نتعمق هنا |
مصمت تماماً ونصف متلاشٍ
ابدأ بمقارنة 1 و0.5 على نفس تصميم البطاقة.
مصمت مقابل نصف شفافية
css.card-solid {
opacity: 1;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}
.card-soft {
opacity: 0.5;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}ماذا يجب أن تلاحظ؟
على .card-soft تبدو الخلفية والنص باهتين. الشفافية لا تستثني الحروف.
الأبناء يتلاشون مع الأب
إن كان للأب opacity: 0.4، فالعناوين والأزرار المتداخلة لا «تخرج» بوضع opacity: 1 الخاص بها. تُرسَم داخل طبقة متلاشية مسبقاً.
شفافية الأب تغسل الأبناء
css.overlay {
opacity: 0.4;
background-color: #0f172a;
color: white;
padding: 1rem;
}
.overlay strong {
opacity: 1; /* لا يعيد القوة الكاملة داخل أب متلاشٍ */
}دلالة تصميمية
تريد لوحة ضبابية بنص حاد؟ خفّف لون الخلفية بـ rgba، لا العنصر كله بـ opacity.
فضّل rgba حين يجب أن يلين التعبئة فقط
هنا خلفية اللوحة شفافة جزئياً، والنص يبقى بقوة كاملة.
تعبئة ناعمة، نص مصمت
css.panel {
background-color: rgba(15, 118, 110, 0.25);
color: #042f2e; /* نص بقوة كاملة */
padding: 1rem;
}عادة واجهة باهتة
نمط شائع: خفض الشفافية قليلاً على الإجراءات الثانوية أو عناصر التحكم المعطّلة لتبدو أهدأ — مع إبقاء التباين مقروءاً.
زر ثانوي باهت
css.btn-secondary {
opacity: 0.75;
background-color: #e2e8f0;
color: #0f172a;
border: none;
padding: 0.5rem 1rem;
}الصفر غير مرئي — المساحة قد تبقى
opacity: 0 يخفي العنصر، لكنه قد يظل يشغل مساحة التخطيط وقد يستقبل أحداث المؤشر حسب السياق. لإزالته من التخطيط أداة أخرى (display: none)، لا الشفافية وحدها.
غير مرئي لكنه ما زال في التدفق
css.ghost {
opacity: 0;
}جرّبها بنفسك
- بطاقتان بنفس الألوان؛ واحدة
opacity: 1وأخرىopacity: 0.5. - سطراً عريضاً داخل أب بـ
opacity: 0.4— تأكد أنك لا تستعيد الابن بالكامل. - أعد البناء بمظهر ناعم عبر
background-color: rgba(…, 0.25)وcolorمصمت. - زر ثانوي بـ
opacity: 0.75وافحص القراءة. - اختياري:
opacity: 0على صندوق ولاحظ الفراغ الذي يتركه في التخطيط.
أخطاء شائعة
- وضع
opacityعلى الأب حين أردت خلفية شفافة فقط - توقع أن ابناً بـ
opacity: 1يبدو مصمتاً داخل أب متلاشٍ - استخدام
opacity: 0بديلاً عن إزالة مساحة التخطيط - خفض الشفافية حتى يفشل تباين النص
- خلط كلمة
transparentبخاصيةopacity
باختصار
opacityتضبط شفافية العنصر كله (0–1)- الأبناء يتلاشون مع الأب — لا يفلتون من الداخل تماماً
- لخلفيات ناعمة بنص مصمت فضّل ألفا
rgba/hsla - شفافية منخفضة تُهديء الواجهة؛ راعِ إمكانية الوصول
- غير المرئي (
0) ليس محذوفاً من التخطيط - تمرّن على زوج البطاقات وإعادة البناء بـ rgba حتى يتضح الفرق
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى