CSS Academy · درس

الشفافية باستخدام Opacity وRGBA

تحكّم في شفافية العناصر باستخدام الخاصية opacity وقيم الألوان rgba().

الشفافية باستخدام Opacity وRGBA درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

خاصية opacity

تحدّد خاصية opacity شفافية العنصر بأكمله، بما في ذلك عناصره الفرعية ومحتواه. وتتراوح القيم من 0 (شفافية كاملة) إلى 1 (عتامة كاملة).

<div class="overlay">Overlay at 50% opacity</div>

تؤثر opacity في جميع العناصر الفرعية

هناك نقطة مهمة يجب الانتباه إليها: تؤثر opacity في شجرة العنصر بأكملها. فالنصوص والصور والعناصر الفرعية داخل عنصر ذي قيمة opacity: 0.5 تصبح شفافة بنسبة 50%، ولا يمكن جعل العناصر الفرعية أكثر عتامة من العنصر الأب.

استخدام RGBA للون شفاف فقط

لجعل لون الخلفية شفافًا فقط من دون التأثير في النص أو العناصر الفرعية، استخدموا rgba() بدلًا من opacity:

<div class="card">Card with transparent background, opaque text</div>

مقارنة RGBA وopacity

استخدموا النموذج الذهني التالي:

opacity: 0.5 — يصبح العنصر بأكمله وعناصره الفرعية شفافة
rgba(r,g,b,0.5) — تصبح قيمة اللون فقط شفافة، ولا تتأثر العناصر الفرعية

شفافية HSLA

ينطبق المبدأ نفسه على hsla(). والوسيطة الرابعة هي قناة ألفا (من 0 إلى 1):

<div class="tooltip">Tooltip with HSLA background</div>

الصيغة الحديثة المفصولة بمسافات

يتيح CSS الحديث استخدام فاصل شرطة مائلة لقيمة ألفا في rgb() وhsl() من دون استخدام الصيغة التي تحتوي على الحرف "a":

<div class="modern-rgb">rgb(0 0 0 / 0.5)</div>
  <div class="modern-hsl">hsl(0 0% 0% / 0.5)</div>

opacity: 0 مقابل visibility: hidden مقابل display: none

تخفي القيم الثلاث العناصر، لكن بطرق مختلفة:

opacity: 0 — يصبح العنصر غير مرئي، لكنه يحتفظ بمساحته ويمكن النقر عليه
visibility: hidden — يصبح العنصر غير مرئي ويحتفظ بمساحته، لكن لا يمكن النقر عليه
display: none — يُزال العنصر من التخطيط بالكامل

الانتقال باستخدام opacity

نظرًا إلى أن opacity تُركّب على GPU، فهي من أقل خصائص CSS تكلفة عند تحريكها. وينبغي أن تستخدم تأثيرات الظهور والاختفاء التدريجي دائمًا انتقالات opacity بدلًا من background-color.

<div class="modal visible">Fades in via opacity transition</div>

نمط الخلفية الشفافة

لمنح العنصر خلفية شبه شفافة مع إبقاء النص واضحًا بالكامل، استخدموا rgba() مع background-color:

<div class="glass-card">Glass effect card</div>

ألفا في الحدود وBox-Shadow

استخدموا RGBA في border-color وbox-shadow لإنشاء تأثيرات شفافة وهادئة:

<div class="card">Card with alpha border &amp; shadow</div>

تذكير بإمكانية الوصول

يقلل النص منخفض الشفافية من سهولة القراءة، وقد لا يستوفي متطلبات تباين الألوان في WCAG. تحققوا دائمًا من نسب التباين عند استخدام الشفافية مع النصوص. واحرصوا على ألا تقل النسبة عن 4.5:1 للنص العادي.

تحقق سريع

لدى عنصر القيمة opacity: 0.3. ماذا يحدث للنص الموجود داخله؟

مراجعة

تجعل opacity العنصر بأكمله وعناصره الفرعية شفافة. استخدموا rgba() أو hsla() لإنشاء ألوان شفافة من دون التأثير في العناصر الفرعية. وتستفيد انتقالات opacity من تسريع GPU وتتميز بأداء جيد. تحققوا دائمًا من نسب التباين عند استخدام الشفافية مع النصوص.

الأسئلة الشائعة

هل درس «الشفافية باستخدام Opacity وRGBA» مجاني؟

نعم — نص درس «الشفافية باستخدام Opacity وRGBA» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «الشفافية باستخدام Opacity وRGBA»؟

تحكّم في شفافية العناصر باستخدام الخاصية opacity وقيم الألوان rgba(). تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «الشفافية باستخدام Opacity وRGBA»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy